Vue学习之v-bind使用实例
1、打开WebStorm开发工具，新建‘test.html’,将vues.js放入同个文件夹，代码中引入vue.js。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="vue.js"></script></head><body></body></html>
2、在body标签内添加div标签，在标签内添加h3，并使用v-bind绑定title属性，写代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="vue.js"></script></head><body> <div id="app"> <h3 v-bind:title="title">h3标签</h3> </div> <script> var vue = new Vue({ el : "#app", data:{ title:"我是title", } }) </script></body></html>
3、打开页面，当鼠标移动到h3标签时，会显示出title
4、修改上面代码，绑定a标签的href属性，这里有个字符串连接的知识点，代码如下：<!DOCTYPE ht罪焐芡拂ml><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="vue.js"></script></head><body> <div id="app"> <h3 v-bind:title="title">h3标签</h3> <a v-bind:href="'http://'+baidu">点我跳转到百度</a> </div> <script> var vue = new Vue({ el : "#app", data:{ title:"我是title", baidu:"www.baidu.com", } }) </script></body></html>
5、上面代码，点击a标签会跳转到
6、使用v-bind配合事件行数还可以动态改变class属性，修改代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="vue.js"></script> <style> .red{ width:100px; height:100px; background-color: red; } .blue{ background-color: blue; } </style></head><body> <div id="app" <a v-bind:href="'http://'+baidu">点我跳转到百度</a> <div v-bind:class="{red:isRed,blue:isBlue}"></div> <button v-on:click = "clickHandler">点我变蓝</button> </div> <script> var vue = new Vue({ el : "#app", data:{ title:"我是title", baidu:"www.baidu.com", isRed:true, isBlue:false, }, methods:{ clickHandler(){ this.isBlue=true; } } }) </script></body></html>
7、再次打开，点击按钮就可以切换颜色了
