Vue.js 中的 v-model 指令及绑定表单元素的方法

我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。

1 基础用法

1.1 文本输入框(text)

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

html:

<div id="app">
 <input type="text" v-model="content" placeholder="请输入">
 <p>输入框:{{content}}</p>
</div>

js:

<script>
 var app = new Vue({
  el: '#app',
  data: {
   content: ''
  }
 });
</script>

效果:

1.2 大文本输入框(textarea)

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

html:

<div id="app2">
 <textarea v-model="content" placeholder="请输入"></textarea>
 <p>内容:</p>
 <p style="white-space: pre">{{content}}</p>
</div>

js:

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

效果:

这里对展示的内容所对应的 <p> 元素加了 white-space: pre 样式,这样内容即使带有回车符也会保留。

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

注意:表单控件所显示的值只依赖于所绑定的数据,所以即便设置了表单控件中的 value值,也不会起作用哦。同理,<textarea>xxx</textarea>之间的值也无效。

之前的示例我们可以发现,使用中文输入法时,只有确定选中的词语,才会被如果 Vue.js 所更新。如果希望输入的内容实时更新,那么可以使用 @input。

html:

<div id="app3">
 <textarea @input="inputHandler" placeholder="请输入"></textarea>
 <p>内容:</p>
 <p style="white-space: pre">{{content}}</p>
</div>

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:

<div id="app4">
 <input id="radio1" type="radio" v-model="checked" value="文学">
 <label for="radio1">文学</label>
 <input id="radio2" type="radio" v-model="checked" value="艺术">
 <label for="radio2">艺术</label>
 <input id="radio3" type="radio" v-model="checked" value="经济">
 <label for="radio3">经济</label>
 <br>
 <p>选择了:{{checked}}</p>
</div>

js:

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

效果:

1.4 复选框

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

html:

<div id="app5">
 <input id="checkbox1" type="checkbox" v-model="checked" value="文学">
 <label for="checkbox1">文学</label>
 <input id="checkbox2" type="checkbox" v-model="checked" value="艺术">
 <label for="checkbox2">艺术</label>
 <input id="checkbox3" type="checkbox" v-model="checked" value="经济">
 <label for="checkbox3">经济</label>
 <br>
 <p>选择了:{{checked}}</p>
</div>

js:

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

效果:

1.5 下拉选择框

1.5.1 单选

html:

<div id="app6">
 <select v-model="selected">
  <option value="1">文学</option>
  <option value="2">艺术</option>
  <option>经济</option>
 </select>
 <br>
 <p>选择了:{{selected}}</p>
</div>

js:

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

效果:

可以看出,如果 <option> 含有 value 值,则会先匹配该值;如果没有,则匹配 <option> 中的 text 值(比如示例中的 <option>经济</option>)。

1.5.2 多选

为 <select> 标签添加 multiple 属性,即可实现多选。

html:

<div id="app7">
 <select v-model="selected" multiple>
  <option value="1">文学</option>
  <option value="2">艺术</option>
  <option>经济</option>
 </select>
 <br>
 <p>选择了:{{selected}}</p>
</div>

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

html:

<div id="app8">
 <select v-model="selected">
  <option v-for="option in options"
     :value="option.value">{{option.text}}
  </option>
 </select>
 <br>
 <p>选择了:{{selected}}</p>
</div>

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:

<div id="app">
 <input id="radio1" type="radio" v-model="picked" :value="value">
 <label for="radio1">文学</label>
 <input id="radio2" type="radio" v-model="picked" :value="value2">
 <label for="radio2">艺术</label>
 <input id="radio3" type="radio" v-model="picked" :value="value3">
 <label for="radio3">经济</label>
 <br>
 <p>{{picked}}</p>
 <p>{{value}},{{value2}},{{value3}}</p>
</div>

js:

var app = new Vue({
 el: '#app',
 data: {
  picked: false,
  value: '文学',
  value2: '艺术',
  value3: '经济',
 }
});

效果:

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

2.2 复选框

html:

<div id="app2">
 <input id="checkbox" type="checkbox" v-model="checked" :true-value="value1" :false-value="value2">
 <label for="checkbox">开关</label>
 <p>checked:{{checked}}</p>
 <p>value1:{{value1}}</p>
 <p>value2:{{value2}}</p>
</div>

js:

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

效果:

复选框的默认值绑定的是 v-model 定义的变量,而勾选与取消勾选所绑定的值,则分别由 :true-value 与 false-value 来实现动态绑定。

2.3 下拉选择框

html:

<div id="app3">
 <select v-model="selected">
  <option :value="{number:1}">文学</option>
  <option :value="{number:2}">艺术</option>
 </select>
 <br>
 <p>选择了:{{selected.number}}</p>
</div>

js:

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

效果:

当选中某个 option 时,app3.selected 为 Object,所以 selected.number 即为 :value 定义的绑定值。

以上示例 DEMO

(0)

相关推荐

  • vue.js指令v-model使用方法

    vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过设置属性访问器实现的.例如: var data = { name: "erik", g

  • vue.js 实现v-model与{{}}指令方法

    上次我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo.今天,我们就基于上一节的代码,来实现一个MVVM类,将其与html结合在一起,并且实现v-model以及{{}}语法. tips:本节新增代码(去除注释)在一百行左右.使用的Observer和Watcher都是延用上一节的代码,没有修改. 接下来,让我们一步步来,实现一个MVVM类. 构造函数 首先,一个MVVM的构造函数如下(和vue.js的构造函数

  • vue.js使用v-model指令实现的数据双向绑定功能示例

    本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能.分享给大家供大家参考,具体如下: vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过

  • vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

    本文实例讲述了vue.js使用v-model实现表单元素(input) 双向数据绑定功能.分享给大家供大家参考,具体如下: v-model 一般表单元素(input) 双向数据绑定 el:'#box',//这里放的是选择器. 不然会不生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vu

  • Vue.js中 v-model 指令的修饰符详解

    1 .lazy v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外).我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据. html: <div id="app"> <input type="text" v-model.lazy="content" placeholder="请输入" value="初始值&quo

  • 用vue.js组件模拟v-model指令实例方法

    1.问题描述 在使用v-model指令实现输入框数据双向绑定,输入值时对应的这个变量的值也随着变化:但是这里不允许使用v-model,需要写一个组件实现v-model指令效果 <div id="user"> <input type="text" v-model="username"> <label>{{username}}</label> </div> <script> le

  • 详解Vue.js之视图和数据的双向绑定(v-model)

    1.使用v-model指令,使得视图和数据实现双向绑定.v-model主要用在表单的input输入框,完成视图和数据的双向绑定. 2.JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"> window.onload = function() {

  • vue.js指令v-model实现方法

    V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个语法糖. 实际是通过下面的代码来实现的: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html lang="en">

  • 浅析Vue.js中v-bind v-model的使用和区别

    v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据 最基础的就是实现一个联动的效果 <body> <div class="app"> <span>Multiline message is:</span> <p>{{message}}</p> <br> &l

  • Vue.js 中的 v-model 指令及绑定表单元素的方法

    我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定. 1 基础用法 1.1 文本输入框(text) 这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上. html: <div id="app"> <input type="text" v-model="content" placeholder="请输入"> <p>输入框:{{content}}</p

  • 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> <p v-if="type===1">拌面</p> <p v-else-if="type===2">扁肉</p> <p v-else="type===3">其它</p> </div

  • 浅谈Vue.js 中的 v-on 事件指令的使用

    v-on 事件指令用于绑定事件. 1 基础用法 v-on 指令绑定事件后,就会监听相应的事件. html: <div id="app"> <h3>已点击 {{count}} 次</h3> <button @click="count++">点我</button> </div> 注意: @click 是 v-on:click 的简写形式, @ 即表示 v-on: . js: <script&g

  • Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法

    今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去官网上查了下资料,发现在vue2.0版本中,{{{}}}转换HTML的方式已经被废除,该版本中必须使用v-html标签进行转换,下面是具体的使用方法: <span v-html="htmlData"> {{htmlData}} </span> 总结 以上所述是小编给

  • AngularJS使用指令增强标准表单元素功能

    Angular 可使用指令无缝地增强标准表单元素的功能,我们将讨论它的优点,包括: 数据绑定.建立模型属性.验证表单.验证表单后反馈信息.表单指令属性 下面我们通过案例验证他们的用法: 一.双向数据绑定(ng-model)和建立模型属性 <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</ti

  • Vue.js中v-show和v-if指令的用法介绍

    目录 一.v-show指令 二.v-if指令 三.v-show和v-if的区别 四.v-else指令 五.v-else-if 一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show="true",表示显示DOM元素. v-show="false", 表示隐藏DOM元素. 看下面的示例: <!DOCTYPE html>

  • vue.js中指令Directives详解

    想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令

  • Vue.js中v-for指令的用法介绍

    一.什么是v-for指令 在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组 代码示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&quo

  • 深入浅析Vue.js 中的 v-for 列表渲染指令

    1 基本用法 当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for. 它的表达式需要结合 in 来使用,类似 item in items 的形式. 1.1 遍历数组 html: <div id="app"> <ul> <li v-for="n in news">{{n.title}}</li> </ul> </div> js: <script> var a

随机推荐