Vuejs的常用指令
v-htmlv-showv-ifv-forv-on
1 、v-html
v-html 更新元素或者变量的innerHTML，按普通html解析，和v-text的区别是在变量中的html标签会被浏览器解析，比如<br>会直接解析为换行
语法
<!--直接在html标签中使用vuejs中的变量msg,语法跟v-text相同--> <div v-html="msg"></div>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Vuejs简单示例</title> <!--引入开发版本vue.js，在开发版本中会有很多友好的提示--> <script src='./vue.js'></script> </head> <body> <!--定义一个id为demo的div--> <div id="demo"> <!--此处的msg为在vuejs中定义的变量，放在两个花括号中--> <div v-html="msg"></div> <script> <!--实例化vuejs--> new Vue({ <!--el指定的id为css选择器--> el:'#demo', <!--我们的变量统统放到data中--> data:{ <!--此处声明的变量msg内容为实验--> msg:'第一行<br><hr>第二行' } }) </script> </body> </html>
2、 v-show
v-show 根据条件解析元素display的属性的真假，如果为真则display为block，假的话则为none在页面不显示。
语法
<!--Show和Hide需在vue中定义。--> <span v-show="Show">你能看到我!</span> <span v-show="Hide">你能看到我吗!</span>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Vuejs简单示例</title> <!--引入开发版本vue.js，在开发版本中会有很多友好的提示--> <script src='./vue.js'></script> </head> <body> <!--定义一个id为demo的div--> <div id="demo"> <!--此处的Show和Hide为在vuejs中定义的变量，放在两个花括号中--> <span v-show="Show">你能看到我!</span> <span v-show="Hide">你能看到我吗!</span> <script> <!--实例化vuejs--> new Vue({ <!--el指定的id为css选择器--> el:'#demo', <!--我们的变量统统放到data中--> data:{ <!--此处声明的变量msg内容为实验--> Show:true, Hide:false } }) </script> </body> </html>
3 、 v-if
v-if、v-else、v-else-if,if三兄弟，条件判断，这个跟我们平时见到的if语句类似，根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
注意
v-else不需要表达式，但是需要跟在v-if和v-else-if后面- 我们在实验中直接使用了
true和false在实际使用中可以使用表达式，例如v-if="1>3"
语法
//Show需在vue中定义 <span v-if="Show">你能看到我!</span>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Vuejs简单示例</title> <script src='./vue.js'></script> </head> <body> <div id="demo"> <p>第一组</p> <p>预期显示“你能看到我!”</p> <span v-if="Show">你能看到我!</span> <span v-else>你能看到我吗!</span> <br> <p>第二组</p> <p>预期显示“你能看到我吗!”</p> <span v-if="hide">你能看到我!</span> <span v-else>你能看到我吗!</span> <br> <p>第三组</p> <p>预期显示“你真的能看到我吗!”</p> <span v-if="hide">你能看到我!</span> <span v-else-if="hide">你能看到我吗!</span> <span v-else>你真的能看到我吗!</span> </div> </body> </html> <script> new Vue({ el:'#demo', data:{ Show:true, hide:false } }) </script>
4 、v-for
v-for 循环遍历
语法
//items为数据，item为数据的元素，text为数据中的元素内容 <div v-for="item in items"> {{ item.text }} </div>
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js指令示例</title> <script src='./vue.js'></script> </head> <body> <div id="demo"> <div v-for="item in items"> {{ item.text }} </div> <div v-for="item in items"> {{ item.name }} </div> <div v-for="item in items"> {{ item.text }}{{ item.name }} </div> <div v-for="item in items"> {{ item }} </div> </div> </body> </html> <script> new Vue({ el:'#demo', data:{ items:[ {text:'hello',name:'实验'}, {text:'hello',name:'vuejs'}, {text:'hello',name:'html'}, {text:'hello',name:'js'}, ] } }) </script>
5、 v-on
v-on 绑定事件监听器
语法
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 --> <input @keyup.13="onEnter">
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js指令示例</title> <script src='./vue.js'></script> </head> <body> <div id="demo"> <button v-on:click="doThis">{{msg}}</button> </div> </div> </body> </html> <script> new Vue({ el:'#demo', data:{ msg:'单击按钮', name:'vuejs' }, methods:{ doThis:function(e){ console.log(this); //console.log(e.target.tagName); console.log(e.target); console.log('hello'+this.name+'!'); } } }) </script>