Vue.js的学习（6）

最新推荐文章于 2020-06-07 19:47:01 发布

原创最新推荐文章于 2020-06-07 19:47:01 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

vue-js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Vue.js中如何使用v-model实现表单输入的双向数据绑定，包括文本输入、复选框、单选框及选择框等不同场景的应用，并讨论了如何利用修饰符来优化输入行为。

表单输入绑定

Vue.js提供了v-model来给<input>&<textarea>创建双向数据绑定

v-model会先忽略所有表单元素的value&&checked&&selected的初始值，而总是将Vue实例中的data数据值作为数据来源，

v-model的作用是监控表单输入内容，然后绑定到{{内容}}中去

 <div id="app7">
        <p>Multiline message is  {{main}}</p>
        <br>
        <textarea v-model="main" placeholder="请输入内容"></textarea>
 </div>
    //JS部分
    var app7=new Vue({
       el:"#app7",
        data:{
           main: null
        }
    });

在复选框中，我们可以在data中使用一个[]来获取所有被选取的元素的数组

 <div id="app8">
        <input type="checkbox" value="a" v-model="checked">
        <label>a</label>
        <input type="checkbox" value="b" v-model="checked">
        <label>b</label>
        <input type="checkbox" value="c" v-model="checked">
        <label>c</label>
        <br>
        <span>Checked:{{checked}}</span>
    </div>
//JS代码
 var app8=new Vue({
       el:"#app8",
       data:{
           checked:[]
       }
    });

在单选框中，我们可以使用v-model来绑定一个布尔值

<div id="app6">
        <input type="radio" id="checkbox"  value="hello" v-model="check">
        <label>hello</label>
        <input type="radio" value="world" v-model="check">
        <label>world</label>
        <br>
        <label>{{check}}</label>
    </div>
//JS代码
 var app6=new Vue({
        el:"#app6",
        data:{
            check:""
        }
    });

在选择框中

    <div id="item">
        <select v-model="selected">
        //如果v-model表达式未匹配选项，那么select就是未渲染状态，在ios中就会无法选择第一个选项，那么我们推荐设置第一个选项为禁止的提示选项
            <option disabled value=" ">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>选中的是：{{selected}}</span>
    </div>
    //JS
    var item=new Vue({
       el:"#item",
       data:{
           selected:""
       }
    });