Onclick復選框如何在Vuejs中添加直線？

new Vue({
  el: "#app",
  
  data: {
    getQuestionAnswers: [
        {
        name: 'foo'
      },
      {
        name: 'bar'
      },
      {
        name: 'baz'
      }
    ]
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  float: left;
  width:100%
}

.red {
  color: red;
}
.bcom{
float:right;
margin-top: -71px;
}

.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="{ 'red': group.name === 'bar' }"
    v-for="(group, index) in getQuestionAnswers"
    :key="index   group.name"
    :group="group"
    
  >
  <input type="checkbox"/>
    {{ group.name }}
  </div>
  <div class="point"></div>
  <div class="bcom">
    <div 
    :class="{ 'red': group.name === 'bar' }"
    v-for="(group, index) in getQuestionAnswers"
    :key="index   group.name"
    :group="group"
    
  >
  <input type="checkbox"/> 
    {{ group.name }}
  </div>
  </div>
</div>

我有兩個 v-for 的通用名稱欄位，所以現在我想用直線匹配欄位，條件就像，點擊復選框，如果用戶的名稱等于，即'foo==foo' 或 'bar=bar ' 或 'baz=baz'

所以在這種情況下，我想在它們之間畫一條直線。為了表明名字是平等的。但如果名稱不相等，我需要將它們顯示為不存在

我不確定，這可以通過 css 還是在任何第三方（npm）的幫助下實作？

如下圖：-

uj5u.com熱心網友回復：

我已經修改了 classNames 和樣式。還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>

標籤：javascript Vue.js 动画片

上一篇：VUEJS中的SEO頁面？其他解決方案然后遷移到NUXTJS？

下一篇：使用vuejs添加天數