[TOC] ### **1. v-bind用于给HTML标签设置属性** ``` v-bind:html属性="vue中data属性" ``` **或简写成** ``` :属性="data属性" ``` 例如： ~~~ <!--<div v-bind:titles='title1'>123</div>--> <div :titles='title1'>123</div> <!--简写形式--> <script> new Vue({ el:"#root", data:{ title1:"v-bind对应的属性值", content:"Please enter your name" } }) </script> ~~~ ## **:符号表示传的值是变量，不加这个符号表示传的就是字面量** 所以，也可以直接这样写（去掉:） ``` <div titles="v-bind对应的属性值">123</div> ``` html页面渲染如下  ### **2. 字符串拼接** ``` <span :text=' "we" + 1 '>使用</span> ``` 会渲染成： ``` <span text='we1'>使用</span> ``` 所以，要想在v-bind指令中使用字符串拼接，只需要结合引号即可。 ### **3. 运算** ``` <div :text='1 + 2'>test</div> ``` 渲染成： ``` <div text="3">test</div> ``` 1 ### **4. 调用vue函数** ``` <div :text='getText()'>test</div> ``` ~~~ methods:{ getText: function() { return "functions" } } ~~~ 渲染成 ``` <div text="functions">test</div> ```