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>