开发者社区> 技术小牛人> 正文

Vue.js 表单控件绑定 v-model

简介:
+关注继续查看

v-model  主要用于input、textarea、select等表单控件元素上创建双向数据绑定,所谓双向绑定就是js中vue实例化的data对象的数据与其渲染的dom元素上的内容保持一致


1、text 文本

1
2
3
4
<div id="app">
    <h1>`message`</h1>
    <input type="text" v-model="message"/>
</div>
1
2
3
4
5
6
new Vue({
    el:'#app',
    data:{
        message:'Hello World !'
    }
})

查看页面效果,随着文本输入框种的内容发生改变,与Vue实例中data绑定的h1的内容也相应发生改变

wKiom1gA5HSifXEYAAB-S5T8qL0353.png

2、textarea  多行文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--多行文本-->
<div id="text">
    <p>Multiline message is: `msg`</p>
    <textarea v-model="msg"></textarea>
</div>
 
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#text',
        data:{
            msg:''
        }
    })
</script>


3、checkbox  复选框

(1)、单个勾选框,逻辑值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--单个勾选框,逻辑值-->
<div id="app">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">`checked`</label>
</div>
 
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm1 = new Vue({
        el:'#app',
        data:{
            checked:true
        }
    });
</script>


(2)、多个勾选框,绑定到同一个数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--多个勾选框,绑定到同一个数组-->
<div id="app1">
    <input type="checkbox" id="jack" value="jack" v-model="checkNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="jhon" value="jhon" v-model="checkNames">
    <label for="jhon">Jhon</label>
    <input type="checkbox" id="mike" value="mike" v-model="checkNames">
    <label for="mike">Mike</label>
    <p>Checked Names: `checkNames`</p>
</div>
 
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm1 = new Vue({
        el:'#app',
        data:{
            checked:true
        }
    });
</script>


4、radio 单选按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--单选按钮-->
<div id="app2">
    <input type="radio" id="male" value="male" v-model="gender">
    <label for="male">Male</label>
    <input type="radio" id="female" value="female" v-model="gender">
    <label for="female">Female</label>
    <p>Gender: `gender`</p>
</div>
 
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm3 = new Vue({
        el:'#app2',
        data:{
            gender:''
        }
    });
</script>


5、select 选择列表

(1)、单选列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--单选列表-->
<div id="app3">
    <select v-model="selected">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>Selected: `selected`</p>
</div>
 
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm4 = new Vue({
        el:'#app3',
        data:{
            selected:''
        }
    });
</script>


(2)、多选列表,绑定到一个数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--多选列表-->
<div id="app4">
    <select v-model="selected" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>Selected: `selected`</p>
</div>
 
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm5 = new Vue({
    el:'#app4',
    data:{
        selected:[]
    }
});
</script>


动态选项,用v-for渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--动态选项,用v-for渲染-->
<div id="app5">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">`option`.`text`</option>
    </select>
    <p>Selected: `selected`</p>
</div>
 
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm6 = new Vue({
    el:'#app5',
    data:{
        selected:'A',
        options:[
            {text:'One', value:'A'},
            {text:'Two', value:'B'},
            {text:'Three', value:'C'}
        ]
    }
});
</script>


绑定Value

对于单选按钮,勾选框及选择列表选项,v-model绑定的数据通常是静态字符串(对于勾选框是逻辑值)

1
2
3
4
5
6
7
8
9
10
<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
 
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
 
<!-- 当选中时,`selected` 为字符串 "abc" -->
<select v-model="selected">
    <option value="abc">ABC</option>
</select>


但是有时我们想绑定 value 到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串。

1
2
3
4
5
6
7
8
9
<!--复选框-->
<div id="app1">
    <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
</div>
 
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b


单选按钮

1
2
3
<input type="radio" v-model="pick" v-bind:value="a">
 
// 当选中时vm.pick === vm.a


选择列表设置

1
2
3
4
5
6
7
8
<select v-model="selected">
    <!-- 内联对象字面量 -->
    <option v-bind:value="{ number: 123 }">123</option>
</select>
 
// 当选中时
typeof vm.selected   // -> 'object'
vm.selected.number   // -> 123



同时,我们也可以通过 过滤器的方式去监控页面内容变化

1
2
3
4
5
6
7
<div id="app">
    <h1>`message`</h1>
    <input type="text" v-model="message"/>
    <pre>
        {{$data|json}}
    </pre>
</div>

wKiom1gA5megLSPtAACGZ89UW8k388.png




修饰符

除了以上用法,v-model指令后面还可以添加多个参数(number、lazy、debounce)


1、number

如果想将用户的输入自动转换为Number类型(如果原始值得转换结果为NaN,则返回原值),则可以添加一个number特性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app">
    <input type="text" v-model="msg" number><br>
    `msg`
</div>
 
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'仅处理number类型的数字'
        }
    })
</script>
 
<!-- 另外一种写法   
<div id="app1">
    <input v-model.number="age" type="text">
    <p>My age is: `age`</p>
</div> 
 
-->

wKioL1gsa6WQDqimAAA0ygGJxPA119.png

wKiom1gsa7LCf5yLAAA4a09xzwQ603.png


2、lazy

在默认情况下,v-model在input事件中同步输入框的值与数据,我们可以添加一个lazy特性,从而将数据改到在change事件中发生。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    <input type="text" v-model="msg" lazy><br>
    `msg`
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'内容是在change事件后才改变的'
        }
    })
</script>


我们在input输入框中输入内容,虽然触发了input事件,但是因为加入了lazy属性,msg的值一直没有发生变化。

wKioL1gsZ2zyYvtLAABTKVCaazE363.png

一直到input输入框发生change事件之后

wKioL1gsZ8GzgDPvAABLmET1mtQ399.png


3、debounce

设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如:在input中输入内容时要随时发送AJAX请求),那么它较为有用

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
 <input type="text" v-model="msg" debounce="5000"><br>
 `msg`
</div>
<script src="js/vue.js"></script>
<script>
 new Vue({
  el:'#app',
  data:{
   msg:'内容是在5s后才改变的'
  }
 })

wKiom1gsajnwH8V2AABX17-R-Qw068.png



改变input输入框中的内容,msg的值没有马上改变,5s后才发生改变

wKioL1gsarriXnmYAABlyAicIdk999.png


4、.trim

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app1">
    <input v-model="msg1" type="text">
    <p>The common message is: `msg1`</p>
    <hr>
    <input v-model.trim="msg2" type="text">
    <p>The trim message is: `msg2`</p>
</div>
 
 
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm1 = new Vue({
        el:'#app1',
        data:{
            msg1:'',
            msg2:''
        }
    })

wKiom1guqSLj_D88AAAJsQ8YC1w773.png

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1862199

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue.js按键修饰符及v-model修饰符
Vue.js按键修饰符及v-model修饰符
20 0
Vue.js事件修饰符及v-model双向数据绑定
Vue.js事件修饰符及v-model双向数据绑定
12 0
【Vue.js】简单说下vuejs中v-model自定义使用姿势
【Vue.js】简单说下vuejs中v-model自定义使用姿势
19 0
Vue:自定义v-model数据双向绑定
Vue:自定义v-model数据双向绑定
36 0
props/$emit、v-model、.sync的适用场景 -- vue组件通信系列
props/$emit、v-model、.sync的适用场景 -- vue组件通信系列
33 0
Vue使用v-model和提交组件实现数据的双向绑定
前段时间有一个朋友在使用vue的时候遇到了一点问题,当时在进行期末答辩所以没找到时间整理代码,今天在整理电脑文件的时候刚好看到了发给朋友的代码,整理下思路和代码顺手发个文章,希望能帮助到更多的人
126 0
vue 自定义组件使用v-model
vue 自定义组件使用v-model
126 0
Vue组件入门(七)v-model与自定义事件
Vue组件入门(七)v-model与自定义事件
87 0
Vue组件入门(八)v-model + 自定义参数
Vue组件入门(八)v-model + 自定义参数
129 0
+关注
技术小牛人
文章
问答
视频
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
23-Vue.js在前端...1506518547.pdf
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多