重庆分公司 重庆分公司

• 网站建设
• 网站制作
• 网站营销
• 小程序
• 新闻动态
• 成功案例
• 关于我们
028-86922220

• 网站建设
• 网站制作
• 网站营销
• 小程序
• 新闻动态
• 成功案例
• 关于我们

 
 
输入框：{{content}}

 
 
内容：
 {{content}}

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

 
 
内容：
 {{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'
 }
});

效果：

可以看出，如果 含有 value 值，则会先匹配该值；如果没有，则匹配 中的 text 值（比如示例中的 经济）。

1.5.2 多选

为 标签添加 multiple 属性，即可实现多选。

html：

 
  文学
  艺术
  经济
 

 
 

选择了：{{selected}}

在实际应用场景， 标签中的 一般是通过 v-for 指令动态输出的，其中每一项的 value 或 text 都可以使用 v-bind 动态输出的。

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 指令有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。