vue.js数据绑定操作详解
本篇章节讲解vue.js数据绑定操作。分享给大家供大家参考,具体如下: 数据绑定
数据绑定语法 1.文本插值{{ }}Mustache标签 Hello {{ name }}
Hello vue
单次插值 首次赋值后再更改vm实例属性值不会引起DOM的变化 2.HTML属性Mustache标签{{ }} 简写: 3.绑定表达式放在Mustache标签内的文本内容。除了直接输出属性值之外,一段绑定表达式可以由一个简单的JavaScript表达式和可选的一个或多个过滤器构成(不支持正则表达式,若需要复杂的转换,则使用过滤器或者计算属性来进行处理)。 4.过滤器vue.js允许在表达式后添加可选的过滤器,以管道符"|"指示。 此时,filterA将name的值做为第一个参数,arg1,arg2做为第二、第三个参数传入过滤器函数中。 最终函数的返回值即为输出结果。arg1,arg2可以使用表达式,也可以加上单引号,直接传入字符串。 例如: u,e
过滤器limitBy可以接受两个参数,第一个参数是设置显示个数,第二个参数为可选,指从开始元素的数组下标。 vue.js内置的10个过滤器(Vue.js2.0中去除)
{Number}limit, {String | Function}targetStringOrFunction,即需要匹配的字符串或函数;"in"可选分隔符。 <p v-for="item in items | filterBy '1.0' in 'name'">{{ item | json }} 使用自定义的过滤函数,函数可以在选项methods中定义 {String|Array|Function}sortKeys,即指定排序的策略。 单个键名: 多个键名: 自定义排序函数: 指令的值限定为绑定表达式,即当表达式的值发生改变时,会有些特殊行为作用到绑定的DOM上。 参数:src为参数 修饰符:以半角句号.开始的特殊后缀,用于表示指令应该以特殊方式绑定。 计算属性 避免在模板中加入过重的业务逻辑,保证模版的结构清晰和可维护性。 {{ lastName }} {{ fullName }} 更新属性时带来便利 表单控件
输入框示例,用户输入的内容和
Your input is : {{ message }}
单选框示例: 3.Checkbox单个勾选框,
checked: {{ checked }} //显示的是true/false
多个勾选框,
单选 多选 通过
Checkbox 选中: 未选中: Radio 选中: 选中: object
vm.selected.number //=> 123
6.参数特性
Class与Style绑定 对象语法: vm实例中需要包含: 渲染结果为: 数组语法: vm实例中需要包括: 渲染结果为: 使用三元表达式切换数组中的class 若 则渲染结果为 对象语法:直接绑定符合样式格式的对象。 vm实例中包含: 数组语法: 在使用transform这类属性时, 希望本文所述对大家vue.js程序设计有所帮助。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |