VUE课程---8、属性绑定v-bind
一、总结
一句话总结：
v-bind是vue中绑定属性的指令，可以将标签里面的属性绑定vue里面的数据，v-bind: 指令可以被简写为 :要绑定的属性
<div id="app"> <p v-bind:title="myTitle">{{msg}}</p> <!--v-bind指令可以简写为:（冒号）--> <p :title="myTitle+'aaaaa'">{{msg}}</p> <a :href="myHref">让学过的东西不再忘记</a> </div> <script src="../js/vue.js"></script> <script> new Vue({ el:'#app', //element data:{ msg:'欢迎来到vue的世界', myTitle:'这是p标签的title属性', myHref:'https://fanrenyi.com' } }); </script>
1、属性绑定指令 v-bind: 的简写形式是什么？
v-bind: 指令可以被简写为 :要绑定的属性
<div id="app"> <p v-bind:title="myTitle">{{msg}}</p> <!--v-bind指令可以简写为:（冒号）--> <p :title="myTitle+'aaaaa'">{{msg}}</p> <a :href="myHref">让学过的东西不再忘记</a> </div> <script src="../js/vue.js"></script> <script> new Vue({ el:'#app', //element data:{ msg:'欢迎来到vue的世界', myTitle:'这是p标签的title属性', myHref:'https://fanrenyi.com' } }); </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 可以用标签里面的属性绑定vue里面的数据 12 13 v-bind指令可以简写为:（冒号） 14 15 --> 16 <div id="app"> 17 <p v-bind:title="myTitle">{{msg}}</p> 18 <!--v-bind指令可以简写为:（冒号）--> 19 <p :title="myTitle+'aaaaa'">{{msg}}</p> 20 21 <a :href="myHref">让学过的东西不再忘记</a> 22 </div> 23 <script src="../js/vue.js"></script> 24 <script> 25 new Vue({ 26 el:'#app', //element 27 data:{ 28 msg:'欢迎来到vue的世界', 29 myTitle:'这是p标签的title属性', 30 myHref:'https://fanrenyi.com' 31 } 32 }); 33 </script> 34 </body> 35 </html>
