双向绑定v-model

v-model双向绑定

在实际开发中会使用表单进行数据的提交,这里我们就可以使用双向数据绑定,即修改表单数据能够改变model的值,修改model的值表单中的内容也会发生相应的变化

有单向数据绑定和双向数据绑定两种方式,来对比着看下:

  • 单向数据绑定

    把model的值绑定到view上面,当修改model的时候,view也会跟着变化。

  • 双向数据绑定

    model和view相互绑定,无论是修改哪个,另一方都会发生变化。

下面代码通过页面修改表单的值时,div中的内容也会发生相应的变化。在浏览器控制台中修改data中name的时候,页面中显示的内容也会跟着变化。这个就是双向数据绑定了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <input type="text" v-model="name">
    <div>{{name}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name: "jack"
        }
    })
</script>
</html>

操作radio

双向绑定v-model操作radio,下面代码开始是给sex设置的男,因此在页面中默认是会选中男这个radio的,当修改radio的时候,可以看到在h2标签中的值发生了变化。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <label for="male">
        <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h2>您选择的性别是: {{sex}}</h2>
    <br>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            sex: "男"
        }
    })
</script>
</html>

操作checkbox

双向绑定v-model操作checkbox。下面在勾选checkbox的时候,可以看到div中的变化

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <input type="checkbox" value="basketball" v-model="hobbies">篮球
    <input type="checkbox" value="football" v-model="hobbies">足球
    <input type="checkbox" value="volleyball" v-model="hobbies">排球
    <div>爱好是: {{hobbies}}</div>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            hobbies: []
        }
    })
</script>
</html>

操作select

使用双向绑定v-model操作select下拉框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <select name="abc" v-model="level">
        <option value="一级">一级</option>
        <option value="二级">二级</option>
        <option value="三级">三级</option>
        <option value="四级">四级</option>
    </select>
    <h2>您选择的级别是: {{level}}</h2>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            level: '一级'
        }
    })
</script>
</html>

v-model修饰符

  • lazy

    v-model默认是在input中修改数据的时候立刻改变model中的数据,使用lazy之后不会立刻改变数据,而是在失去焦点或者按下回车的时候才会进行改变。

  • number

    默认情况下在input中输入的数字会被当做字符串类型,使用number之后可以让输入框中的内容变成number类型

  • trim

    可以去除首尾空格

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <input type="text" v-model.lazy="name">
    <div>姓名:{{name}}</div>
    <input type="number" v-model.number="age">
    <div>年龄:{{age}}--{{typeof age}}</div>
    <input type="text" v-model.trim="address">
    <div>地址:{{address}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name: "jack",
            age: 18,
            address: "北京"
        }
    })
</script>
</html>

 

Category: vue