vue-表单输入绑定

表单输入绑定

1、基本语法

可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

1.1、文本

<div id="app">
    {{msg}}
    <input v-model="msg">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"基本语法"
        }
    });
</script>

1.2、多行文本

<div id="app">
    {{msg}}
    <textarea v-model="msg" ></textarea>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"基本语法"
        }
    });
</script>

1.3、复选框

<div id="app">

    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    {{checkedNames}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            checkedNames: []
        }
    });
</script>
结果下图

1.4、单选按钮

<div id="app">
<input type="radio" id="one" value="1" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="2" v-model="picked">
    <label for="two">Two</label><br/>
    {{picked}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            picked: ''
        }
    });
</script>
结果为下

1.5、选择列表

<div id="app">
 <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    {{selected}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            selected:""
        }
    });
</script>
结果为下

2、绑定value

对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符

2.1、复选框

下面做一个value为true的时候选着a，为false的时候选着b

<div id="app">
    <input type="checkbox" v-model="check" value = "学习" 
    v-bind:true-value="a" v-bind:false-value="b"/>学习
    {{check}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"基本语法",
            check:true,
            a:"学习1",
            b:"学习2"

        }
    });
</script>

2.2、单选按钮

<div id="app">
    <input type="radio" v-model="pick" v-bind:value="c">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            pick:"d",
            c:"c",
            d:"d"

        }
    });
</script>
结果根据pick的值来定，如果值是d就不选中，如果是c就选着，因为是根据value来决定pick的值

3、修饰符

修饰符有以下3种

3.1、.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步

<div id="app">
    {{msg}}
    <input v-model.lazy="msg"/>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"修饰符",
           
        }
    });
</script>

该图为没有加lazy的7

该图为加了lazy的8

3.2、.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值

<div id="app">
    {{msg}}
    <input v-model.number="num"/>
    <input v-model.number="num1"/>
    {{num+num1}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
           num:1,
           num1:1
        }
    });
</script>

该结果是不加.number的，将两边的拼接起来8

该结果是加.number的，将他们都转换成数字，将不是数字的自动删除9

3.3、trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

<div id="app">
    {{msg}}
    <input v-model.lazy.trim="msg"/><br/>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"修饰符",
        }
    });
</script>

该结果是不加.trim的

该结果是加了.trim的