如何在Vue.js中使用v-model指令
今天就跟大家聊聊有关如何在Vue.js 中使用 v-model 指令,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
吴桥网站建设公司成都创新互联公司,吴桥网站设计制作,有大型网站制作公司丰富经验。已为吴桥1000多家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的吴桥做网站的公司定做!
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:
选择了:{{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 指令有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
本文题目:如何在Vue.js中使用v-model指令
文章源于:http://scyanting.com/article/jgjsoj.html