代码之家 › 专栏 › 技术社区 › timpone

使用带有CSS特定复选框的Vue和V-Model

vuejs2

timpone · 技术社区 · 6 年前

我正在将一些jquery代码迁移到Vue。我们有如下部分:

<td>
  <p>
    <input class="select-one checkbox-default-input" type="checkbox" :value="placement.id" v-model="checkedPlacements">
    <label for="select-clicks" class="checkbox-default" @click="setValue"></label>
   </p>
 </td>

例如,我使用一个标签来调整与此类似的输入的用户界面: Pure CSS Checkbox Image replacement

我如何将我的v模型与正确的输入值相关联?

2 回复 | 直到 6 年前

Sphinx 6 年前

Vue Guide: Form Input binding

v-bind v-on one simple explanation at here

v-model

new Vue({
  el: '#app',
  data() {
    return {
      placement: {id: 'value1'},
      checkedPlacements: [], // default is one Array
      checkedPlacement: false // default is one Boolean
    }
  },
  watch: {
    checkedPlacements: function (newVal) {
      console.log('changed', newVal)
    },
    checkedPlacement: function (newVal) {
      console.log('changed', newVal)
    }
  }
})

input[type=checkbox] {
display:none;
}
 
input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
   <p>
    <input class="select-one checkbox-default-input" type="checkbox" :value="placement.id" v-model="checkedPlacements" id="select-clicks1">
    <label for="select-clicks1" class="checkbox-default"></label>
    <input class="select-one checkbox-default-input" type="checkbox" :value="'value2'" v-model="checkedPlacements" id="select-clicks2">
    <label for="select-clicks2" class="checkbox-default"></label>
   </p>
   <p>
    <input class="select-one checkbox-default-input" type="checkbox" :value="placement.id" v-model="checkedPlacement" id="select-clicks3">
    <label for="select-clicks3" class="checkbox-default"></label>
   </p>
</div>

GustavMahler 6 年前

<td>
  <p>
    <input id="select-clicks" class="select-one checkbox-default-input" type="checkbox" :checked="placement.id" @input="toggleCheckbox">
    <label for="select-clicks" class="checkbox-default"></label>
  </p>
</td>

id for

:checked="placement.id" placement.id

@input="toggleCheckbox"

toggleCheckbox() {
    this.placement.id = !this.placement.id;
},

:class https://vuejs.org/v2/guide/class-and-style.html

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

2 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

2 年前

roev · 大堆来自(物体)。forEach不使用vue。js

2 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

Tim · VueJS-迭代从AJAX调用返回的数据

6 年前