复选框的点击如何在Vuejs中添加直线?
Onclick of checkbox how to add straight line in Vuejs?
<script>
export default {
name: 'App',
data() {
return {
getQuestionAnswers: [
{
name: 'foo',
checked: false,
status: 'good'
},
{
name: 'bar',
checked: false,
status: 'worst'
},
{
name: 'baz',
checked: false,
status: 'good'
},
{
name: 'df',
checked: false,
status: 'bad'
},
{
name: 'apple',
checked: false,
status: 'worst'
}
]
}
}
}
</script>
//ListTwo.vue
<script>
export default {
name: 'App',
data() {
return {
getQuestionAnswers: [
{
name: 'vall',
checked: false,
status: 'good'
},
{
name: 'bara',
checked: false,
status: 'bad'
},
{
name: 'ssss',
checked: false,
status: 'bad'
},
{
name: 'ba',
checked: false,
status: 'worst'
},
{
name: 'df',
checked: false,
status: 'good'
},
{
name: 'ae',
checked: false,
status: 'good'
},
{
name: 'amm',
checked: false,
status: 'worst'
}
]
}
}
}
</script>
<template>
<div id="app">
<div
class="bcom"
v-for="(group, index) in getQuestionAnswers"
:key="index + group.name"
:group="group"
>
<div :class="['container1', { red: group.name === 'bar' }]">
<input type="checkbox" v-model="group.checked" />
{{ group.name }}
</div>
<div class="container2">
<div class="h-line" v-if="group.checked">{{ group.status }}</div>
</div>
</div>
</div>
</template>
正如您在上面提供的代码的输出中看到的,我有两个部分,一个是左边,一个是右边。两者来自不同的组件,两者的数据也不同。
当点击左侧的“foo”时,是否可以匹配右侧的内容状态。和画线(条件就像,无论状态好画线)它是多个也很好。
我修改了类名和样式。还为输入字段添加了 v-model
。请检查下面的工作代码
new Vue({
el: "#app",
data: {
getQuestionAnswers: [
{
name: 'foo',
checked: false
},
{
name: 'bar',
checked: false
},
{
name: 'baz',
checked: false
}
]
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
width:100%
}
.red {
color: red;
}
.bcom {
width: 100%;
display: flex;
}
.container1 {
width: 50px;
}
.container2 {
width: calc(100% - 105px);
padding: 8px 0;
height: 30px;
box-sizing: border-box;
}
.h-line {
height: 1px;
margin-bottom: 18px;
width: 100%;
background-color: black;
}
.container3{
margin-left: 5px;
width: 50px;
}
.point {
width: 6px;
height: 6px;
background: tomato;
border-radius: 3px;
transition: width 1s ease;
}
.point:hover {
width: 200px;
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<div class="bcom"
v-for="(group, index) in getQuestionAnswers"
:key="index + group.name"
:group="group"
>
<div :class="['container1',{ 'red': group.name === 'bar' }]">
<input type="checkbox" v-model="group.checked"/>
{{ group.name }}
</div>
<div class="container2">
<div class="h-line" v-if="group.checked"></div>
</div>
<div :class="['container3',{ 'red': group.name === 'bar' }]">
<input type="checkbox" v-model="group.checked"/>
{{ group.name }}
</div>
</div>
<div class="point"></div>
</div>
<script>
export default {
name: 'App',
data() {
return {
getQuestionAnswers: [
{
name: 'foo',
checked: false,
status: 'good'
},
{
name: 'bar',
checked: false,
status: 'worst'
},
{
name: 'baz',
checked: false,
status: 'good'
},
{
name: 'df',
checked: false,
status: 'bad'
},
{
name: 'apple',
checked: false,
status: 'worst'
}
]
}
}
}
</script>
//ListTwo.vue
<script>
export default {
name: 'App',
data() {
return {
getQuestionAnswers: [
{
name: 'vall',
checked: false,
status: 'good'
},
{
name: 'bara',
checked: false,
status: 'bad'
},
{
name: 'ssss',
checked: false,
status: 'bad'
},
{
name: 'ba',
checked: false,
status: 'worst'
},
{
name: 'df',
checked: false,
status: 'good'
},
{
name: 'ae',
checked: false,
status: 'good'
},
{
name: 'amm',
checked: false,
status: 'worst'
}
]
}
}
}
</script>
<template>
<div id="app">
<div
class="bcom"
v-for="(group, index) in getQuestionAnswers"
:key="index + group.name"
:group="group"
>
<div :class="['container1', { red: group.name === 'bar' }]">
<input type="checkbox" v-model="group.checked" />
{{ group.name }}
</div>
<div class="container2">
<div class="h-line" v-if="group.checked">{{ group.status }}</div>
</div>
</div>
</div>
</template>
正如您在上面提供的代码的输出中看到的,我有两个部分,一个是左边,一个是右边。两者来自不同的组件,两者的数据也不同。
当点击左侧的“foo”时,是否可以匹配右侧的内容状态。和画线(条件就像,无论状态好画线)它是多个也很好。
我修改了类名和样式。还为输入字段添加了 v-model
。请检查下面的工作代码
new Vue({
el: "#app",
data: {
getQuestionAnswers: [
{
name: 'foo',
checked: false
},
{
name: 'bar',
checked: false
},
{
name: 'baz',
checked: false
}
]
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
width:100%
}
.red {
color: red;
}
.bcom {
width: 100%;
display: flex;
}
.container1 {
width: 50px;
}
.container2 {
width: calc(100% - 105px);
padding: 8px 0;
height: 30px;
box-sizing: border-box;
}
.h-line {
height: 1px;
margin-bottom: 18px;
width: 100%;
background-color: black;
}
.container3{
margin-left: 5px;
width: 50px;
}
.point {
width: 6px;
height: 6px;
background: tomato;
border-radius: 3px;
transition: width 1s ease;
}
.point:hover {
width: 200px;
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<div class="bcom"
v-for="(group, index) in getQuestionAnswers"
:key="index + group.name"
:group="group"
>
<div :class="['container1',{ 'red': group.name === 'bar' }]">
<input type="checkbox" v-model="group.checked"/>
{{ group.name }}
</div>
<div class="container2">
<div class="h-line" v-if="group.checked"></div>
</div>
<div :class="['container3',{ 'red': group.name === 'bar' }]">
<input type="checkbox" v-model="group.checked"/>
{{ group.name }}
</div>
</div>
<div class="point"></div>
</div>