vue表单绑定：多选框和下拉列表

在vue的实际开发过程中，我们如何将已选中的值直接渲染到页面中，这次主要说的是多选框和下拉列表的实现：

<label>测试多选渲染：</label>
<div>
  <template v-for="item in chks">
    <input type="checkbox" name="hobby" :value="item.id" 
     :checked="loopsss.indexOf(item.id) > -1"/>{{item.name}}
  </template>
</div>
<label>下拉列表测试：</label>
<div>
  <select multiple style="width: 100px;">
    <template v-for="item in chks">
      <option type="checkbox" name="hobby" :value="item.id"   
		      :selected="loopsss.indexOf(item.id) > -1">{{item.name}}
	  </option>
    </template>
  </select>
</div>

<script>
  export default {
    data () {
      return {
        chks: [
          {id:1,name:"吃饭"},
          {id:2,name:"睡觉"},
          {id:3,name:"打豆豆"},
          {id:4,name:"唱歌"},
          {id:5,name:"学习"}
        ],
        loopsss:''
      }
    },
    mounted: function () {
      this.init()
    },
    methods: {
      init: function () {
        var arr = [1,2,4]//假设这是被选中的爱好
        this.loopsss = arr
      }
    }
  }
</script>

结果如下：

上述实现方式主要是借助indexOf方法去检索id在值在数组中是否可以找到，如果找到，则给checked和selected属性设置true值，这样对应的值就可以被选中。