如何利用Vue.js库中的v-js获取text的值指令绑定数据源

来源：蜘蛛抓取(WebSpider) 时间：2017-10-28 05:44 标签： vue.js v text
vue.js 表单控件 输入绑定 v-model的使用 - CSDN博客
vue.js 表单控件 输入绑定 v-model的使用
vue的表单输入绑定的双向性
借助mvvm，vue中通过v-model指令实现了view-&viewModel-&model(简称为v-m)和model-&viewModel-&model(简称为m-v)的双向绑定。
m-v可以简单理解为通过操纵js改变左值引起视图改变。
v-m为用户在视图层操作引起左值改变。
左值：一个古老的术语，可以简单理解为放在赋值操作符=左侧的值，具体有标识符，对象的属性，数组的下标。
let leftValue=1;
let obj={};
obj.attr=1;
let arr=[];
先来个例子感受下表单输入双向绑定的魅力:
//表单输入双向绑定demo
id="form"&
type="text" v-model="input" /&
&{{input}}&
let form=new Vue({
el:"#form"
input:"input"
接下来，我会从v-m和m-v两个方向细致的讲解from表单中input(type=text)h,select,checkbox,radio在这两个方向的用法。
input(type=text)
id="form"&
type="text" v-model="input" /&
&{{input}}&
let form=new Vue({
el:"#form"
input:"input"
textarea标签与input(type=text)行为相同
1.没有为input(type=checkbox)设置value属性
id="form"&
type="checkbox" v-model="checkbox" /&
&{{checkbox}}&
let form=new Vue({
el:"#form"
checkbox:1
2.为input(type=checkbox)设置静态value属性
这里指的静态是说没有为checkbox输入框的value设置此vue实例中的左值,来个demo
&form id="form"&
&input type="checkbox" value="1" /&
&input type="checkbox" :value="someValue" /&
&input type="checkbox" :true-value="tagValue" /&
let tagValue="1";
let form=new Vue({
el:"#form"
tagValue:tagValue
动态和静态区别：
静态：在初始化时，采用（v-model设置的值==true）表达式判等，决定checkbox是否是选中的，在用户改变时，input（type=checkbox）的值在true和false之间切换，与设置的value值无关
动态：在初始化时，采用（v-model设置的值==v-bind:true-value设置的值）表达式判等，决定checkbox是否是选中的，在用户改变时，input（type=checkbox）的值在v-bind:true-value设置的值和v-bind:false-value设置的值之间切换
需要注意的是，：value，：true-value，：false-value设置的值是将它们所在vue实例作为上下文查找的左值
回到为input(type=checkbox)设置静态value属性的说明上来，请看下边的demo
id="form"&
type="checkbox" value="1" v-model="checkbox"/&
let form=new Vue({
el:"#form"
checkbox:""
3.为input(type=checkbox)设置动态value属性
直接上demo
&form id="form"&
&input type="checkbox" :true-value="trueValue" :false-value="falseValue" v-model="checkbox"/&
let trueValue="trueValue";
let form=new Vue({
el:"#form"
checkbox:1
,trueValue:trueValue
,falseValue:"falseValue"
在初始化时，采用（v-model设置的值==v-bind:true-value设置的值）表达式判等，决定checkbox是否是选中的，在用户改变时，input（type=checkbox）的值在v-bind:true-value设置的值和v-bind:false-value设置的值之间切换
另外通过v-bind:true-value和v-bind:false-value设置的值是将它们所在vue实例作为上下文查找的左值
还有一种情况是将多个checkbox的v-model值设置为相同的。
id="form"&
type="checkbox" value="1" v-model="checkbox"/&
type="checkbox" value="2" v-model="checkbox"/&
type="checkbox" value="3" v-model="checkbox"/&
let form=new Vue({
el:"#form"
checkbox:[1]
话不多说，先来个demo感受下
id="form"&
v-model="select"&
let form=new Vue({
el:"#form"
select:"A"
从上面可以看出，select 的行为方式为将v-model的值与option的文本值进行==运算符判等，true就选中
那要是这样呢
id="form"&
v-model="select"&
value="c"&A&
value="b"&B&
value="a"&C&
let form=new Vue({
el:"#form"
select:"c"
各位小伙伴有没有发现，当option设置了value属性时，select的行为就变成了将v-model的值与option的value值进行==运算符判等，true就选中，也就是说option设置value属性的优先级要高于其文本值。
当用户手动选中时也是这样，option未设置value属性值时，v-model为用户手动选中的option的文本值，option设置value属性值时，v-model为用户手动选中的option的value值。
当为select添加multiple属性时又会怎么样呢
来个demo感受下
id="form"&
v-model="select"&
value="a"&A&
value="b"&B&
value="c"&C&
let form=new Vue({
el:"#form"
select:["a","b","c"]
当用户按住ctrl，点击取消optionB时，select为[“a”,”c”]，这个没有问题。要是又按住ctrl，点击选中optionB会怎样呢，像多个checkbox设置相同的v-model值一样push压进数组吗？no,no,no它会按照多个option的排列顺序，找到自己在多个option的位置下标，将自己插入select数组相同下标位置。
话不多说，先来个demo感受下
id="form"&
type="radio" value="a" v-model="radio" /&
type="radio" value="b" v-model="radio" /&
let form=new Vue({
el:"#form"
因为是单选框，所以相同name的两个单选框的v-model值必须一致。
它的行为方式是将v-model设置的值与input[type=radio]的value值用==运算符判等，相等即选中。
要是想给input[type=radio]的value值设置为一左值该怎么办？
id="form"&
type="radio" :value="a" v-model="radio" /&
type="radio" :value="b" v-model="radio" /&
let form=new Vue({
el:"#form"
此时input[type=radio]的行为方式为:
将它们所在vue实例作为上下文查找相应的左值赋值给value属性，v-model值与input[type=radio]的value值用==运算符判等，true选中。用户手动改动时，v-model值为value属性得到的相应的左值的值。比如上边demo，用户点击:value=”a”，再点击:value=”b”。v-model为{}。
有点晚了…….
明天再补充些彩蛋………
本文已收录于以下专栏：
相关文章推荐
操作echart的时候，当包含价格的时候，价格的数据全部显示，需求要求3位数一截取，如下：
解决方案：
代码展示：
document.getElementById(...
xAxis : [ { type : 'category', splitLine:{ show:false }, data: categories } ], yAxis : [ { type : 'v...
路由跳转,有两种表现方式
list-style:
事件处理主要通过v-on这个指令来执行。
事件监听及方法处理
1.简单的可以直接内嵌在页面。
2.可以通过将方法定义在methods中，然...
title:Vue.js学习 Item9 – 表单控件绑定—基础用法可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇，v-mod...
最近在看vue官网教程的时候碰到一点问题：
{{ option.text }}
Selected: {{ selected }}
el: '...'...
1、使用v-model指令,使得视图和数据实现双向绑定。v-model主要用在表单的input输入框，完成视图和数据的双向绑定。
2、JavaScript代码
window.onloa...
一、基础语法vuejs中用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。但要注意的是v-model仅仅是语法糖，它只负责监听用户的输入时间一更新数据...
5.1 基本用法
Welcom {{name}}
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)

我要回帖

更多关于 vue.js v text 的文章

 

随机推荐