2-4 Vue中的属性绑定和双向数据绑定
Posted zhongzhenhua
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2-4 Vue中的属性绑定和双向数据绑定相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性绑定和双向数据绑定</title> <script src="./vue.js"></script> </head> <body> <div id="root"></div> <script type="text/javascript"> new Vue({ el: "#root" }) </script> </body> </html>
只是引入了Vuejs的库,然后创建了一个div标签作为一个挂载点,然后让Vue实例挂载到我们的这个挂载点之下。接下来写模板的内容。title是一个HTML的一个属性。希望这个提示语title可变,不是写死的。我们可以在实例的data里面去定义一个title,让它等于this is hello world。这个时候title里显示的内容是数据里的title就可以了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性绑定和双向数据绑定</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <div title="this is hello world">hello world</div> </div> <script type="text/javascript"> new Vue({ el: "#root" }) </script> </body> </html>
这样写可以吗?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性绑定和双向数据绑定</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <div title="title">hello world</div> </div> <script type="text/javascript"> new Vue({ el: "#root", data:{ title:"this is hello world" } }) </script> </body> </html>
现在只是显示字符串的title,并不是下面data里面数据项里的title。如果在Vue之中我们希望做属性的绑定,这个title属性绑定的是数据里面的title,那怎么做好属性的绑定呢?那就需要在前面使用一个新的模板指令:
v-bind:
它的意思是
以上是关于2-4 Vue中的属性绑定和双向数据绑定的主要内容,如果未能解决你的问题,请参考以下文章