十八、v-model值的绑定

对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串（value值）。

但是有时我们可能想把值绑定到vue实例的一个动态属性上，

这时可以用v-bind实现，并且这个属性的值可以不是字符串，可以是对象或者数组。

（1）绑定复选框 

<input type='checkbox' v-model='checked' true-value="yes" false-value="no">{{checked}}

（2）绑定选择框的选项 

<select v-model='selected'>
     <option disable value="">请选择</option>
     <option  :value="{title:'羊肉串'}">羊肉串</option>
<select>
结果：{{selected.title}}

注意：绑定的时候，使用了内联对象字面量。

<template v-if='false'><!--（1）绑定复选框-->
     <input type="checkbox" v-model='toggle' true-value="yes" false-value="no">{{toggle}}<br>
     <input type="checkbox" v-model='checked' true-value="1" false-value="2">{{checked}}<br>
</template>
<script>
    let data={
        toggle:'no',//（1）绑定复选框
        checked:'1',       
    } </script>

<template v-if='false'><!--（2）绑定选择框（单选）的选项-->
     <select v-model='selected'>
          <option disable value="">请选择</option>
          <option v-for="(item,index) in items" :key="index" :value="item">{{item.title}}</option>
     </select>
     <span>选择的是：{{selected.title}},价格：{{selected.price}}</span>
</template>
<script>
    let data={
        selected:'',//（2）绑定选择框的选项
        items:[
            {title:'羊肉串',price:2},
            {title:'猪肉串',price:3},
            {title:'牛肉串',price:4},
        ],  
    }      
</script>

<template><!--（2）绑定选择框(多选)的选项-->
     <select v-model='selectedArr' multiple>
           <option v-for="(item,index) in items" :value='item'>{{item.title}}</option>
     </select>
     <span>选择的是：{{selectedArr.length>0?selectedArr.join(","):""}}</span><br><!--输出=>选择的是：[object Object],[object Object]-->
     <span>选择的是：{{selectedArr.length>0?selectedArr:""}}</span><br><!--输出=>选择的是：[ { "title": "猪肉串", "price": 3 }, { "title": "牛肉串", "price": 4 } ]-->
</template>
<script>
     let data={
         items:[
             {title:'羊肉串',price:2},
             {title:'猪肉串',price:3},
             {title:'牛肉串',price:4},
         ],
         selectedArr:[]
      }
</script>