vue.js数据绑定操作详解


Posted in Javascript onApril 23, 2018

本文实例讲述了vue.js数据绑定操作。分享给大家供大家参考,具体如下:

数据绑定

响应式的数据绑定系统。建立绑定之后,DOM将和数据保持同步,无须手动维护DOM。使代码能够更加简洁易懂、提升效率。

数据绑定语法

1.文本插值

{{ }}Mustache标签

<span>Hello {{ name }}</span>
data:{
    name: 'vue'
}
== > Hello vue

单次插值

首次赋值后再更改vm实例属性值不会引起DOM的变化

<span v-once="name">{{ name }}</span>

2.HTML属性

Mustache标签{{ }}

<div v-bind:id="'id-'+id"></div>

简写:

<div :id="'id-'+id"></div>

3.绑定表达式

放在Mustache标签内的文本内容。除了直接输出属性值之外,一段绑定表达式可以由一个简单的JavaScript表达式和可选的一个或多个过滤器构成(不支持正则表达式,若需要复杂的转换,则使用过滤器或者计算属性来进行处理)。

{{ index + 1}}
{{ index == 0 ? 'a' : 'b' }}
{{name.split('').join('|') }}
{{ var a = 1 }} //无效

4.过滤器

vue.js允许在表达式后添加可选的过滤器,以管道符"|"指示。

{{ name | uppercase }} // Vue.js将name的值传入给uppercase这个内置的过滤器中(本质是一个函数),返回字符串的大写值。
{{ name | filterA | filterB }}  //多个过滤器链式使用
{{ name | filterA arg1 arg2 }} //传入多个参数

此时,filterA将name的值做为第一个参数,arg1,arg2做为第二、第三个参数传入过滤器函数中。

最终函数的返回值即为输出结果。arg1,arg2可以使用表达式,也可以加上单引号,直接传入字符串。

例如:

{{ name.split('') | limitBy 3 1 }} // ->u,e

过滤器limitBy可以接受两个参数,第一个参数是设置显示个数,第二个参数为可选,指从开始元素的数组下标。

vue.js内置的10个过滤器(Vue.js2.0中去除)

capitalize:字符串首字符转化为大写。
uppercase:字符串转化为大写。
lowercase:字符串转化为小写。
currency:参数为{String}[货币符号],{Number}[小数位],将数字转化成货币符号,并且会自动添加数字分节号。

{{ amount | currency '¥' 2 }} //若amount值为1000,则输出为¥1,000.00

pluralize:参数为{String}single,[double,triple],字符串复数化。

<p v-for="c in count">{{ c | pluralize 'item' }} {{ c | pliralize 'st' 'nd' 'rd' 'th' }} </p>
//输出结果:
1item 1st
2items 2nd
3items 3rd
4items 4th

json:参数为{Number}[indent]空格缩进数,将json对象数据输出成符合json格式的字符串。

debounce:传入值必须是函数,参数可选,为{Number}[wait],即延时时长。作用是当调用函数n毫秒后,才会执行该动作。

<input v-on:keyup="onKeyup | debounce 500"> //input元素上监听了keyup事件,并且延迟500ms触发

limitBy:传入值必须是数组,参数为{Number}limit{Number}[offset],limit为显示个数,offset为开始显示数组下标。

<div v-for="item in items | limitBy 10"></div> //items为数组,且只显示数组中的前十个元素

filterBy:传入值必须是数组,参数为{String | Function}targetStringOrFunction,即需要匹配的字符串或函数;"in"可选分隔符。{String}[...searchKeys],为检索的属性区域。

<p v-for="name in names | filterBy '1.0'">{{ name }}</p> //检索names数组中值包含1.0的元素

<p v-for="item in items | filterBy '1.0' in 'name'">{{ item | json }}</p> //检索items中元素属性name值为1.0的元素输出。检索区域也可以为数组,即in [name,version],在多个属性中进行检索。
//输出结果
vue1.0
{"name":"vue1.0","version":"1.0"}

使用自定义的过滤函数,函数可以在选项methods中定义

<p v-for="item in items | filterBy customFilter"
  methods:{
    cuestomFilter:function(item){
      if(item.name) return true;  //检索所有元素中包含name属性的元素
    }
  }

orderBy:传入值必须是数组,参数为{String|Array|Function}sortKeys,即指定排序的策略。

单个键名:

<p v-for="item in items | orderBy 'name' -1">{{ item.name}}</p> //items数组中以键名name进行降序排列

多个键名:

<p v-for="item in items | orderBy [name,version]">{{item.name}}</p> //使用items里的两个键名进行排序

自定义排序函数:

<p v-for="item in items | orderBy customOrder">{{item.name}}</p>
methods:{
  customOrder: function(a,b){
    return parseFloat(a.version) > parseFloat(b.version) //对比item中version的值的大小进行排序
  }
}

5.指令

指令的值限定为绑定表达式,即当表达式的值发生改变时,会有些特殊行为作用到绑定的DOM上。

参数:src为参数

<img v-bind:src="avatar" /> <==>  <img src="{{avatar}}" />

修饰符:以半角句号.开始的特殊后缀,用于表示指令应该以特殊方式绑定。

<button v-on:click.stop="doClick"></button> //stop:停止冒泡。相当于调用了e.stopPropagagation().

计算属性

避免在模板中加入过重的业务逻辑,保证模版的结构清晰和可维护性。

1.基础例子

var vm = new Vue({
    el: '#app',
    data: {
      firstName:'Gavin',
      lastName:'CLY'
    },
    computed: {
      fullName:function(){
        //this指向vm实例
        return this.firstName + ' ' + this.lastName;
      }
    }
})
<p>{{ firstName }}</p>  //Gavin
<p>{{ lastName }}</p>  //CLY
<p>{{ fullName }}</p>  //Gavin CLY

注:此时对vm.firstNamevm.lastName进行修改,始终会影响vm.fullName

2.Setter

更新属性时带来便利

var vm = new Vue({
    el:'#el',
    data:{
      cents:100
    },
    computed:{
      price:{
        set:function(newValue) {
          this.cents = newValue * 100;
        },
        get:function(){
          return (this.cents / 100).toFixed(2);
        }
      }
    }
})

表单控件

v-model:对表单元素进行双向数据绑定,在修改表单元素值时,实例vm中对应的属性值也同时更新,反之亦然。

var vm = new Vue({
    el:'#app',
    data: {
      message: '',
      gender: '',
      cheched: '',
      multiChecked: '',
      a: 'checked',
      b: 'checked'
    }
})

1. Text

输入框示例,用户输入的内容和vm.message直接绑定:

<input type="text" v-model="message" />
<span>Your input is : {{ message }} </span>

2. Radio

单选框示例:

<label><input type="radio" value="male" v-model="gender">男</lable>
<label><input type="radio" value="famale" v-model="gender">女</lable>
<p>{{ gender }}</p> //显示的是value值

3.Checkbox

单个勾选框,v-model即为布尔值,此时Input的value并不影响v-model的值。

<input type="checkbox" v-model="checked" />
<span>checked: {{ checked }} </span> //显示的是true/false

多个勾选框,v-model使用相同的属性名称,且属性为数组。

<label><input type="checkbox" value="1" v-model="multiChecked">1</label>
<label><input type="checkbox" value="1" v-model="multiChecked">2</label>
<label><input type="checkbox" value="1" v-model="multiChecked">3</label>
<p>MultiChecked:{{ multiChecked.join{'|'} }}</p> //multiChecked:1|2

4.Select

单选

<select v-model="selected">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

多选

<select v-model="multiSelected" multiple>
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>MultiSelected: {{ multiSelected.join('|') }}</span>

5.绑定value

通过v-bind实现,表单控件的值绑定到Vue市里的动态属性上。

Checkbox

<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b" />

选中:

vm.checked == vm.a  //=> true

未选中:

vm.checked == vm.b //=>true

Radio

<input type="radio" v-model="checked" v-bind:value="a" >

选中:

vm.checked == vm.a //=> true

3.Select Options

<select v-model="selected">
    <!-- 对象字面量 -->
    <option v-bind:value="{ number:123}">123</option>
</select>

选中:

typeof vm.selected //=> object
vm.selected.number //=> 123

6.参数特性

.lazy:默认情况下,v-model在input事件中同步输入框与数据,加lazy属性后会在change事件中同步。

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number:自动将用户输入转为Number类型,如果原值转换结果为NaN,则返回原值。

<input v-model.number="age" type="number">

.trim:如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入

<input v-model.trim="msg">

Class与Style绑定

1.Class绑定

对象语法:v-bind:class接受参数是一个对象,而且可以与普通的class属性共存。

<div class="tab" v-bind:class="{'active':active,'unactive':!active}"></div>

vm实例中需要包含:

data:{
  active:true
}

渲染结果为:

<div class="tab active"></div>

数组语法:v-bind:class也接受数组作为参数。

<div v-bind:class="[classA,classB]"></div>

vm实例中需要包括:

data:{
  classA:"class-a",
  classB:"class-b"
}

渲染结果为:

<div class="class-a class-b"></div>

使用三元表达式切换数组中的class

<div v-bind:class="[classA,isB?classB:""]"></div>

vm.isB = false

则渲染结果为

<div class="class-a"></div>

2.内联样式绑定(style属性绑定)

对象语法:直接绑定符合样式格式的对象。

<div v-bind:style="alertStyle"></div>

vm实例中包含:

data:{
  alertStyle:{
    color: 'red',
    fontSize: '2px'
  }
}
<div v-bind:style="{fontSize:alertStyle.fontSize,color:'red'}"></div>

数组语法:v-bind:style允许将多个样式对象绑定到同一元素上。

<div v-bind:style="[ styleObjectA,styleObjectB]" .></div>

3.自动添加前缀

在使用transform这类属性时,v-bind:style会根据需要自动添加厂商前缀。:style在运行时进行前缀探测,如果浏览器版本本省就不支持不加前缀的css属性,那就不会添加。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
JS中Map和ForEach的区别
Feb 05 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
js实现旋转的星空效果
Nov 01 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 #jQuery
再谈Angular4 脏值检测(性能优化)
Apr 23 #Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 #Javascript
vue.js中实现登录控制的方法示例
Apr 23 #Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 #Javascript
Vue前端开发规范整理(推荐)
Apr 23 #Javascript
Vue 中mixin 的用法详解
Apr 23 #Javascript
You might like
调频问题解答
2021/03/01 无线电
PHP 数组遍历顺序理解
2009/09/09 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
深入PHP数据加密详解
2013/06/18 PHP
php curl基本操作详解
2013/07/23 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python写的一个简单DNS服务器实例
2014/06/04 Python
python继承和抽象类的实现方法
2015/01/14 Python
python 调用HBase的简单实例
2016/12/18 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
代码分析Python地图坐标转换
2018/02/08 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python批量处理文件或文件夹
2020/07/28 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
团员个人的自我评价
2013/12/02 职场文书
初中家长寄语
2014/04/02 职场文书
大足石刻导游词
2015/02/02 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
Oracle中日期的使用方法实例
2022/07/07 Oracle