Vue.js v-bind遇到的数据渲染问题
2017-08-03 13:44
615 查看
作者:江湖z
链接:http://www.jianshu.com/p/98dfa4c6389c
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
这里的 html 最后会渲染成:
渲染结果是:
最后渲染的结果是:
链接:http://www.jianshu.com/p/98dfa4c6389c
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
一. v-bind介绍
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ,我们可以用v-bind处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和 style 时, Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
<div id="app"> <p v-bind:title="title">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div> ...... var vm = new Vue({ el: '#app', data: { title: 'title content' } });
这里的 html 最后会渲染成:
<div id="app"> <p title="title content">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div>
二.指令预期值
上面这种v-bind是我们对于vue指令最初的理解,vue指令的预期值(如
v-bind:class="classProperty"中,
:后面的
class是参数,而
classProperty则是在官方文档中被称为“预期值”),除了向上面那样绑定一个字符串类型的变量,它还支持一个 单一 Javascript 表达式 (v-for除外)。所以治理,我们多了更多的选择,如下:
(1) 执行运算
变量和
字符串拼接:
<div id="app"> <p v-bind:title="t1 + ' ' + t2">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div> ...... var vm = new Vue({ el: '#app', data: { t1: 'title1', t2: 'title2' } });
渲染结果是:
<div id="app"> <p title="title1 title2">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div>
(2) 执行函数
<div id="app"> <p v-bind:title="getTitle()">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div> ...... var vm = new Vue({ el: '#app', data: { getTitle: function () { return 'title content'; } } });
最后渲染的结果是:
<div id="app"> <p title="title content">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div>
相关文章推荐
- 解决vue.js 数据渲染成功仍报错的问题
- vue.js遇到的问题-数组数据改变,页面不能实时显示
- 用Vue.js往前端填充数据时遇到的问题
- vue.js 数据渲染成功仍报错的问题
- vue.js 2.0项目遇到的问题整理(持续更新中)
- vue项目中做编辑功能传递数据时遇到问题的解决方法
- 学习两天Vue.js遇到的问题及解决办法。
- ionic+nodejs开发遇到的跨域和post请求数据问题
- vue动态为数据添加新属性遇到的问题
- vue数据渲染出现闪烁问题及v-cloak没生效
- 数据可视化过程中遇到的json转换及js执行顺序问题
- 详解vue数据渲染出现闪烁问题
- 最近整理了个js,解决了excel导入读取数据遇到的种种问题
- vue.js程序启动运行时,遇到Unexpected tab character问题
- vue.js学习笔记--遇到的那些问题
- 转载:ionic+nodejs开发遇到的跨域和post请求数据问题
- vue项目中做编辑功能传递数据时遇到的问题
- 03、vue.js 之数据渲染
- Vue.js双向数据绑定模板渲染
- 关于js中post方法遇到的同步问题(取不到json里的数据)