189 8069 5689

如何在Vue.js中使用v-model指令-创新互联

今天就跟大家聊聊有关如何在Vue.js 中使用 v-model 指令,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

创新互联公司主要从事网站建设、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务五莲,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

1 基础用法

1.1 文本输入框(text)

这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上。

html:


 
 

输入框:{{content}}

js:

效果:

如何在Vue.js 中使用 v-model 指令

1.2 大文本输入框(textarea)

绑定方法与文本输入框相同。

html:


 
 

内容:

 {{content}}

js:

var app2 = new Vue({
 el: '#app2',
 data: {
  content: ''
 }
});

效果:

如何在Vue.js 中使用 v-model 指令

这里对展示的内容所对应的

元素加了 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 原生事件对象。

效果:

如何在Vue.js 中使用 v-model 指令

1.3 单选框

单选框一般都有多个条件可供选择,既然是单选框,自然希望实现互斥效果,我们可以使用 v-model 指令配合单选框的 value 来实现。

html:


 
 文学
 
 艺术
 
 经济
 
 

选择了:{{checked}}

js:

var app4 = new Vue({
 el: '#app4',
 data: {
  checked: '文学'
 }
});

效果:

如何在Vue.js 中使用 v-model 指令

1.4 复选框

复选框的绑定方式与单选框相同,只不过复选框所对应的数据类型是数组罢了。

html:


 
 文学
 
 艺术
 
 经济
 
 

选择了:{{checked}}

js:

var app5= new Vue({
 el: '#app5',
 data: {
  checked: ['文学','艺术']
 }
});

效果:

如何在Vue.js 中使用 v-model 指令

1.5 下拉选择框

1.5.1 单选

html:


 
  文学
  艺术
  
 
 
 

选择了:{{selected}}

js:

var app6 = new Vue({
 el: '#app6',
 data: {
  selected: '1'
 }
});

效果:

如何在Vue.js 中使用 v-model 指令

可以看出,如果 )。

1.5.2 多选

 
 

选择了:{{selected}}

如何在Vue.js 中使用 v-model 指令

在实际应用场景,  
 

选择了:{{selected}}

js:

var app8 = new Vue({
 el: '#app8',
 data: {
  selected: '1',
  options: [
   {text: '文学', value: '1'},
   {text: '艺术', value: '2'}
  ]
 }
});

效果:

如何在Vue.js 中使用 v-model 指令

--------------------------------------------------------------------------------

因为 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: '经济',
 }
});

效果:

如何在Vue.js 中使用 v-model 指令

示例中定义的单选框默认值为 picked 所定义的 false。当选中某个单选框时,则动态绑定在 :value 中定义的变量。

2.2 复选框

html:


 
 开关
 

checked:{{checked}}

 

value1:{{value1}}

 

value2:{{value2}}

js:

var app2 = new Vue({
 el: '#app2',
 data: {
  value1: '亮',
  value2: '暗',
  checked: ''
 }
});

效果:

如何在Vue.js 中使用 v-model 指令

复选框的默认值绑定的是 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://cdxtjz.com/article/pdojc.html

其他资讯