Vue使用v-bind绑定动态数据

有时需要绑定一个动态的数据，可以用v-bind来实现

单选按钮：

<div id="app">
  <input type="radio" v-model="picked" :value="value">
  <label>单选按钮</label>
  <p>{{picked}}</p>
  <p>{{value}}</p>
 </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script>
 new Vue({
  el:'#app',
  data:{
   picked:false,
   value:123
  }
 })
</script>

在选中时，app.picked===app.value   值都是123

 

复选框：

<div id="app">
  <input
   type="checkbox"
   v-model="toggle"
   :true-value="value1"
   :false-value="value2">
  <label>复选框</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>
 </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script>
 new Vue({
  el:'#app',
  data:{
   toggle:false,
   value1:'a',
   value2:'b'
  }
 })
</script>

选中时，app.toggle===app.value1;未勾选时，app.toggle===app.value2

 

下拉框：

<div id="app">
  <select v-model="selected">
   <option :value="{number:123}">123</option>
  </select>
  {{selected.number}}
 </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script>
 new Vue({
  el:'#app',
  data:{
   selected:''
  }
 })
</script>

当选中时，app.selected是一个Object,所以app.selected.number===123。