【轻松学vue】vue.js基础入门教程（七）v-model指令

v-model指令

表单输入绑定（双向绑定）
v-model应用在<input>、<textarea>、<select>标签上，实现数据的双向绑定

<div id="app">
    <div>
        <p>单行文本框：<input type="text" v-model="text"></p>
        <p>{{text}}</p>
    </div>
    <div>
        <p>多行文本框：<textarea name="" id="" cols="30" rows="10" v-model="textarea"></textarea></p>
        <p>{{textarea}}</p>
    </div>
    <div>
        <p>下拉列表：
            <select v-model="select">
                <option>北京</option>
                <option>天津</option>
                <option>上海</option>
            </select>
        </p>
        <p>{{select}}</p>
    </div>
    <div>
        <p>多选下拉列表
            <select multiple v-model="selectArr">
                <option>北京</option>
                <option>天津</option>
                <option>上海</option>
                <option>重庆</option>
            </select>
        </p>
        <p>多选结果：{{selectArr}}</p>
    </div>
    <div>
        <p>复选框：
            <input type="checkbox" v-model="users" value="zhangsan" id="zhangsan"><label for="zhangsan">张三</label>
            <input type="checkbox" v-model="users" value="lisi" id="lisi"><label for="lisi">李四</label>
            <input type="checkbox" v-model="users" value="wangwu" id="wangwu"><label for="wangwu">王五</label>
        </p>
        <p>选中的结果：{{users}}</p>
    </div>
    <div>
        <p>单选按钮：
            <input type="radio" id="man" value="男" v-model="sex">
            <label for="man">男</label>
            <input type="radio" id="woman" value="女" v-model="sex">
             <label for="woman">女</label>
        </p>
        <p>性别：{{sex}}</p>
    </div>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            text:"",
            textarea:"",
            select:"北京",
            selectArr:[],
            users:[],
            sex:""
        }
    })
</script>

表单值绑定的几种情况：
1）下拉列表值绑定（给option的value绑定内容）

<div id="app">
    <div>
        <p>下拉列表：
            <select v-model="select">
                <option v-for="city in cityData" v-bind:value="city.cityCode">{{city.cityName}}</option>
            </select>
        </p>
        <p>{{select}}</p>
    </div>

</div>
   
<script>
    var app = new Vue({
        el:"#app",
        data:{
            cityData:[
                {cityName:"北京",cityCode:"beijing"},
                {cityName:"天津",cityCode:"tianjin"},
                {cityName:"重庆",cityCode:"qiongqing"},
                {cityName:"上海",cityCode:"shanghai"}
            ],
             select:"beijing",
        }
    })
</script>

2）复选框值绑定

<div id="app">
    <div>
        <p>复选框：
            <input type="checkbox" v-model="checkbox" true-value="yes" false-value="no">
        </p>
        <p>复选框中的值：{{checkbox}}</p>
    </div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            checkbox: "no",
        }
    })
</script>

修饰符：
.lazy 使input事件变成change事件，也就是文本框失去焦点时，内容改变
.number 自动将输入值转为数值类型
.trim 过滤输入内容的首尾空白符

QQ：732005030
扫码加微信