vue内容绑定（v-model）

v-model演示

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上或者组件上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <input type="text" v-model.lazy="text1" placeholder="请输入姓名">
            <p>姓名：{{text1}}</p>
            
            <input type="checkbox" v-model="text2">
            <p>是否90后：{{text2}}</p>
            
            <input type="radio" value="男" v-model="text3">
            <input type="radio" value="女" v-model="text3">
            <p>性别：{{text3}}</p>
            
            <select v-model="text4">
                <option disabled value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <p>您选择: {{ text4 }}</p>
            
            <input type="checkbox" value="苹果" v-model="text5">苹果
            <input type="checkbox" value="香蕉" v-model="text5">香蕉
            <input type="checkbox" value="梨" v-model="text5">梨
            <p>你喜欢的水果：{{text5}}</p>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                text1: "刘小涛",
                text2: "true",
                text3: "保密",
                text4: "",
                text5: [],
            }
        })
    </script>
</html>

输入框，单选，复选，下拉框演示案例；复制可运行。

修饰符

.lazy

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <!-- 在 "change" 而不是 "input" 事件中更新 -->
            <input v-model.lazy="msg" >
            <p>{{msg}}</p>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                msg: "刘小涛",
            }
        })
    </script>
</html>

.number

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <input v-model.number="age" type="number">
            <p>{{age}}</p>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                age: "",
            }
        })
    </script>
</html>

.trim

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <input v-model.trim="input">
            <p>{{input}}</p>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                input: "",
            }
        })
    </script>
</html>

v-model原理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <input v-model="something"/>
            <!-- 等同 -->
            <input v-bind:value="something" v-on:input="something = $event.target.value"/>
            <p>{{something}}</p>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                something: "",
            }
        })
    </script>
</html>