关于关于vue.js v-bind 的一些理解和思考的一些理解和思考
本篇文章主要介绍了关于vue.js v-bind 的一些理解和思考，小编觉得挺不错的，现在分享给大家，也给大家做个
参考。一起跟随小编过来看看吧
一、一、v-bind 初探初探
它是一个 vue 指令，用于绑定 html 属性，如下：
<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"
中，v-bind 是指令，: 后面的 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>
三、支持的数据类型三、支持的数据类型
下载后可阅读完整内容，剩余5页未读，立即下载
weixin_38610070
- 粉丝: 2
- 资源: 940
我的内容管理
展开
最新资源
- C++标准程序库：权威指南
- Java解惑：奇数判断误区与改进方法
- C++编程必读：20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程：从入门到精通
- Spring3.0权威指南：JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略：从环境配置到索引创建
- 内存虚拟硬盘技术：提升电脑速度的秘密武器
- Java操作数据库：保存与显示图片到数据库及页面
- ISO14001：2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发：触发器与控制器重定向技术详解
- FPGA开发实战指南：创新设计与进阶技巧
- ShopExV4.8二次开发入门：解决升级问题与功能扩展
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
