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

港控/mmm° 2023-10-18 08:59 32阅读 0赞

有时需要绑定一个动态的数据，可以用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

![70][]

复选框：

<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

![Image 1][]![70 1][]

下拉框：

<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。

![Image 1][]

![70 2][]

[70]: https://img-blog.csdn.net/20180919233452726?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[Image 1]: 
[70 1]: https://img-blog.csdn.net/20180919233518983?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180919233541219?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70