如何在Vue.js中使用v-model指令-创新互联-成都快上网建站
如何在Vue.js中使用v-model指令-创新互联
今天就跟大家聊聊有关如何在Vue.js 中使用 v-model 指令，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
创新互联公司主要从事
网站建设、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务五莲,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
1 基础用法
1.1 文本输入框（text）
这里演示了在文本输入框上输入的内容，会实时映射到绑定的数据上。
html：
输入框：{{content}}
js：
效果：
1.2 大文本输入框（textarea）
绑定方法与文本输入框相同。
html：
内容：
{{content}}
js：
var app2 = new Vue({
el: '#app2',
data: {
content: ''
}
});效果：
这里对展示的内容所对应的
元素加了 white-space: pre 样式，这样内容即使带有回车符也会保留。
--------------------------------------------------------------------------------
注意：表单控件所显示的值只依赖于所绑定的数据，所以即便设置了表单控件中的 value值，也不会起作用哦。同理，之间的值也无效。
之前的示例我们可以发现，使用中文输入法时，只有确定选中的词语，才会被如果 Vue.js 所更新。如果希望输入的内容实时更新，那么可以使用 @input。
html：
内容：
{{content}}
js：
var app3 = new Vue({
el: '#app3',
data: {
content: ''
},
methods: {
inputHandler: function (event) {
this.content = event.target.value;
}
}
});可以看出，即使在 @input 定义的函数不带参数，Vue.js 也会在定义的函数（示例中的 inputHandler）中传入 event 原生事件对象。
效果：
1.3 单选框
单选框一般都有多个条件可供选择，既然是单选框，自然希望实现互斥效果，我们可以使用 v-model 指令配合单选框的 value 来实现。
html：
文学
艺术
经济
选择了：{{checked}}
js：
var app4 = new Vue({
el: '#app4',
data: {
checked: '文学'
}
});效果：
1.4 复选框
复选框的绑定方式与单选框相同，只不过复选框所对应的数据类型是数组罢了。
html：
文学
艺术
经济
选择了：{{checked}}
js：
var app5= new Vue({
el: '#app5',
data: {
checked: ['文学','艺术']
}
});效果：
1.5 下拉选择框
1.5.1 单选
html：
文学
艺术
选择了：{{selected}}
js：
var app6 = new Vue({
el: '#app6',
data: {
selected: '1'
}
});效果：
可以看出，如果 ）。
1.5.2 多选
为
html：
文学
艺术
选择了：{{selected}}
在实际应用场景，
html：
{{option.text}}
选择了：{{selected}}
js：
var app8 = new Vue({
el: '#app8',
data: {
selected: '1',
options: [
{text: '文学', value: '1'},
{text: '艺术', value: '2'}
]
}
});效果：
--------------------------------------------------------------------------------
因为 select 标签的呈现样式依赖于浏览器，所以在实际业务场景中，我们更多的是使用 div 来模拟 select 标签的列表功能，而这可以通过使用 Vue.js 自定义组件的方式来实现一个通用的下拉选择组件。
以上示例 DEMO
2 绑定动态变量
之前所说的示例，v-model 绑定的都是静态变量。我们可以使用 v-bind 来绑定动态变量。
2.1 单选框
html：
文学
艺术
经济
{{picked}}
{{value}},{{value2}},{{value3}}
js：
var app = new Vue({
el: '#app',
data: {
picked: false,
value: '文学',
value2: '艺术',
value3: '经济',
}
});效果：
示例中定义的单选框默认值为 picked 所定义的 false。当选中某个单选框时，则动态绑定在 :value 中定义的变量。
2.2 复选框
html：
开关
checked：{{checked}}
value1：{{value1}}
value2：{{value2}}
js：
var app2 = new Vue({
el: '#app2',
data: {
value1: '亮',
value2: '暗',
checked: ''
}
});效果：
复选框的默认值绑定的是 v-model 定义的变量，而勾选与取消勾选所绑定的值，则分别由 :true-value 与 false-value 来实现动态绑定。
2.3 下拉选择框
html：
文学
艺术
选择了：{{selected.number}}
js：
var app3 = new Vue({
el: '#app3',
data: {
selected: ''
}
});看完上述内容，你们对如何在Vue.js 中使用 v-model 指令有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联成都网站设计公司行业资讯频道，感谢大家的支持。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享文章：如何在Vue.js中使用v-model指令-创新互联
文章链接：http://kswjz.com/article/pdojc.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
