十八、v-model值的绑定

2021/9/7 6:07:39

本文主要是介绍十八、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>

 

 

 

 

 

 



这篇关于十八、v-model值的绑定的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程