vuejs有指令嗎-前端問答-PHP中文網

vuejs有指令嗎

青灯夜游

發布： 2023-01-11 09:22:39

原創

1895 人瀏覽過

vuejs有指令。 Vuejs的指令是以「v-」開頭的，它們作用於HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會為綁定的目標元素添加一些特殊的行為，可以將指令看成特殊的HTML特性。

vuejs有指令嗎

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vuejs有指令。

Vue中什麼是指令

#Vue.js的指令是以v-開頭的，它們作用於HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會為綁定的目標元素加入一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。

VueJS透過稱為指令的新屬性來擴充HTML。
ViueJS透過內建的指令來為應用程式新增功能。
VueJS允許你自訂指令。

指令的特徵

#所有指令都包含在Vue實例管理的範圍內。
vueJS指令是擴充的HTML屬性，帶有前綴v-。
v-model指令把元素值(例如輸入域的值)綁定到應用程序，儲存值。

vuejs常用指令

#Vue.js提供了一些常用的內建指令，接下來我們將介紹以下幾個內建指令：

v-if指令
v-show指令
#v-else指令
v-bind指令
v-on指令

#v-if指令

v-if是條件渲染指令，它根據表達式的真假來刪除和插入元素

基本語法：
v-if="expression"
expression是一個傳回布林值的表達式，表達式可以是一個布林屬性，也可以是一個返回布林的運算式。

<div id="app">
			<div v-if="isMale">男士</div>
			<div v-if="age>=20">age:{{age}}</div>
		</div>
		
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				age:25,
				isMale:true,
			}
		})

登入後複製

v-show指令

v-show和v-if區別。

v-show不管條件是否成立，都會渲染html,而v-if只有條件成立才會渲染

先看兩個截圖，第一個是當isMale為true時，第二張圖是isMale為false條件不成立時，可以看到v-if的html並沒有渲染出來，

而使用v-show的p只是更改了它的樣式display: none;

<div id="app">
			<div v-if="isMale">男士v-if</div>
			<div v-show="isMale">男士v-show</div>
		</div>
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				isMale:false
			}
		})

登入後複製

v-else指令

#v-else指令與v-if或v-show同時使用，v-if條件不成立則會顯示v-else內容

<div id="app">
			<div v-if="isMale">男士</div>
			<div v-else>女士</div>
		</div>
		var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				isMale:true
			}
		})

登入後複製

v-for指令

#v-for指令基於一個數組渲染一個列表，它和JavaScript的遍歷語法相似

v-for="item in list"
list是數組，item是目前遍歷的陣列元素
v-for="(item,index) in list"其中index是目前迴圈的索引，下標從0開始

<div id="app">
			<table>
				<tr class="thead">
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<tr v-for="(item,index) in list">
					<td v-text="index+1"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
				</tr>
			</table>
		</div>
		
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				list:[{
					name:&#39;章三&#39;,
					age:18
				},{
					name:&#39;李四&#39;,
					age:23
				}]
			}
		})

登入後複製

v-bind指令

v-bind動態地綁定一個或多個特性，在其名稱後面可以帶一個參數，中間放一個冒號隔開，這個參數通常是HTML元素的特性（attribute），如v-bind: class

class可以和v-bind:class同時存在，也就是說有class了，再添加v-bind:class並不會覆蓋原來的樣式類，而是在原來基礎上添加新的類名

<div id="app">
			<img v-bind:src="img" class="logo" 
				v-bind:class="isLogo?&#39;&#39;:&#39;product&#39;" 
				v-bind:style="{&#39;border&#39;:hasBorder?&#39;2px solid red&#39;:&#39;&#39;}"></img>
		</div>
		
		var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				img:&#39;https://www.baidu.com/img/bd_logo1.png&#39;,
				isLogo:false,
				hasBorder:true
			}
		})

登入後複製

以上v-bind:src也可簡寫成:src,修改上面程式碼

<div id="app">
			<img :src="img" class="logo" 
				:class="isLogo?&#39;&#39;:&#39;product&#39;" 
				:style="{&#39;border&#39;:hasBorder?&#39;2px solid red&#39;:&#39;&#39;}"></img>
		</div>

登入後複製

v-on指令

v-on用於監聽DOM事件,用法和v-bind類似，例如給button新增點擊事件