首页 > 代码库 > vue.js指令总结
vue.js指令总结
1.v-html
用于输出真正html，而不是纯文本。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-html的使用</title> <script src=http://www.mamicode.com/"js/vue.js"></script></head><body> <div id="v-html" v-html="message"> {{message}} </div> <script> var vHtml=new Vue({ el:‘#v-html‘, data:{ message:‘<p>v-html指令添加的p标签</p>‘ } }) </script></body></html>
2.v-bind
用于html属性的数据绑定。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-bind的使用</title> <script src=http://www.mamicode.com/"js/vue.js"></script></head><body> <input id="v-bind" type="text" v-bind:disabled="message"> <script> var vBind=new Vue({ el:‘#v-bind‘, data:{ message:‘false‘ } }) </script></body></html>
3.v-on
用于监听DOM事件。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-on的使用</title> <script src=http://www.mamicode.com/"js/vue.js"></script></head><body> <div id="v-on" v-on:click="changeStatus"> {{message}} </div> <script> var vOn=new Vue({ el:‘#v-on‘, data:{ message:‘我喜欢vue.js‘ }, methods:{ changeStatus:function(){ if(this.message==‘我喜欢vue.js‘) { this.message=‘我不喜欢vue.js‘ } else { this.message="我喜欢vue.js" } } } }) </script></body></html>
注意：只有v-on和v-bind可以接参数，在指令后面用冒号指明属性和值绑定。
4.v-model
用于表单输入与应用状态的双向数据绑定。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model的使用</title> <script src=http://www.mamicode.com/"js/vue.js"></script></head><body> <div id="v-model"> <input type="text" v-model="message"> <p>{{message}}</p> </div> <script> var vModel=new Vue({ el:‘#v-model‘, data:{ message:‘‘ } }) </script></body></html>
5.v-if
v-if接收bool类型。true的话则生成html，false则不生成。或者直接将元素remove掉。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-if的使用</title> <script src=http://www.mamicode.com/"js/vue.js"></script></head><body> <div id="v-if"> <p v-if="seen">我在闪烁</p> </div> <script> var vIf=new Vue({ el:‘#v-if‘, data:{ seen:true }, methods:{ change:function(){ if(this.seen) { this.seen=false; } else { this.seen=true; } } } }) setInterval(vIf.change,1000) </script></body></html>
6.
vue.js指令总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。