VUE课程参考---5、属性绑定v-bind
一、总结
一句话总结：
v-bind是vue中绑定属性的指令，v-bind中可以写合法的js表达式，v-bind: 指令可以被简写为 :要绑定的属性
<div id="app"> <!-- <p title="123">{{msg}}</p>--> <!--v-bind是在vue中用于绑定属性的指令--> <p v-bind:title="myTitle">{{msg}}</p> <!--vue的指令里面都可以写合法的js表达式--> <p v-bind:title="myTitle + '： 这是拼接的内容'">{{msg}}</p> <!--v-bind: 指令可以被简写为 :要绑定的属性--> <p :title="myTitle + '： 这是拼接的内容'">{{msg}}</p> </div> <script src="../js/vue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ msg:'让学过的东西不再忘记的 编程视频学习网站：fanrenyi.com', myTitle:'这是一个自定义的title' } }); //console.log(vm); </script>
1、属性绑定指令 v-bind: 的简写形式是什么？
v-bind: 指令可以被简写为 :要绑定的属性
<div id="app"> <!-- <p title="123">{{msg}}</p>--> <!--v-bind是在vue中用于绑定属性的指令--> <p v-bind:title="myTitle">{{msg}}</p> <!--vue的指令里面都可以写合法的js表达式--> <p v-bind:title="myTitle + '： 这是拼接的内容'">{{msg}}</p> <!--v-bind: 指令可以被简写为 :要绑定的属性--> <p :title="myTitle + '： 这是拼接的内容'">{{msg}}</p> </div> <script src="../js/vue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ msg:'让学过的东西不再忘记的 编程视频学习网站：fanrenyi.com', myTitle:'这是一个自定义的title' } }); //console.log(vm); </script>
二、属性绑定v-bind
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>属性绑定v-bind</title> 6 </head> 7 <body> 8 <!-- 9 10 v-bind 11 作用：v-bind是在vue中用于绑定属性的指令 12 13 注意：vue的指令里面都可以写合法的js表达式 14 15 简写：v-bind: 指令可以被简写为 :要绑定的属性 16 17 18 --> 19 <div id="app"> 20 <!-- <p title="123">{{msg}}</p>--> 21 <!--v-bind是在vue中用于绑定属性的指令--> 22 <p v-bind:title="myTitle">{{msg}}</p> 23 <!--vue的指令里面都可以写合法的js表达式--> 24 <p v-bind:title="myTitle + '： 这是拼接的内容'">{{msg}}</p> 25 <!--v-bind: 指令可以被简写为 :要绑定的属性--> 26 <p :title="myTitle + '： 这是拼接的内容'">{{msg}}</p> 27 </div> 28 <script src="../js/vue.js"></script> 29 <script> 30 let vm=new Vue({ 31 el:'#app', 32 data:{ 33 msg:'让学过的东西不再忘记的 编程视频学习网站：fanrenyi.com', 34 myTitle:'这是一个自定义的title' 35 } 36 }); 37 //console.log(vm); 38 </script> 39 </body> 40 </html>