Vue入門經常使用指令

一.Vue 介紹

​ Vue (讀音 /vjuː/,相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是,Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層,不只易於上手,還便於與第三方庫或既有項目整合。 另外一方面,當與現代化的工具鏈以及各類支持類庫結合使用時,Vue 也徹底可以爲複雜的單頁應用提供驅動。javascript

二.使用方法

下載到本地引用:css

​ 開發版: https://cn.vuejs.org/js/vue.jshtml

​ 生產版:https://cn.vuejs.org/js/vue.min.js前端

在線引用:vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

npm安裝:java

// 最新穩定版
npm install vue
// 安裝vue-cli腳手架構建工具
npm install --global vue-cli

官網:https://cn.vuejs.org/git

三.vue入門指令

vue實例建立

<body>
		<!--  定義id爲app做爲 錨點 -->
		<p id="app">
			<!-- vue 表達式{{}} 兩個花括號 ,裏面是數據名-->
			{{msg}}
		</p>
		<!-- 引入 vue.js -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 建立 vue 實例
			new Vue({
				// el 表明的是 頁面中的 id值
				el: '#app',
				// data 是數據 ,與json數據同樣
				data: {
					msg: "hello vue",
				}
			})
			// 在頁面就會顯示 hello vue
		</script>
</body>

注意:vue 表達式語法是兩個花括號{{msg}} 裏面寫實例中對應的數據名,數據名必須在對應的vue實例之下。github

在寫實例vue時 要注意 屬性和 屬性名之間的空格vue-cli

  • 指令
    1. 本質就是自定義屬性
    2. Vue中指令都是以 v- 開頭

v-text指令

<body>
		<div id="app">
			<!-- 在使用 v-text標籤時就不須要{{}} 效果等同於{{msg}} -->
			<p v-text="msg"></p>
			<p>{{msg}}</p>
		</div>
		<!-- 導入vue.js -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 在寫實例vue時 要注意 屬性和 屬性名之間的空格
			new Vue({
				el: '#app',
				data: {
					msg: "v-text 測試"
				}
			})
		</script>
	    <!-- 頁面效果 打印了兩個 v-text 測試-->
	</body>

v-html指令

  • 用法和v-text 類似 可是他能夠將HTML片斷填充到標籤中npm

  • 可能有安全問題, 通常只在可信任內容上使用 v-html永不用在用戶提交的內容上

  • 它與v-text區別在於v-text輸出的是純文本,瀏覽器不會對其再進行html解析,但v-html會將其當html標籤解析後輸出。

<body>
	<div id="app">
		<!-- v-html 指令會將標籤渲染解析 -->
		<p v-html="html"></p>
		<!-- 輸出:<span>html標籤在渲染的時候被源碼輸出</span> -->
		<p v-text="text"></p>
		<!-- msg 普通語法 -->
		<p>{{msg}}</p>
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let app = new Vue({
			el: "#app",
			data: {
				msg: "<span >普通雙標籤不會解析span標籤</span>",
				html: "<span>v-html指令能夠渲染解析標籤</span>",
				text: "<span>v-text 不會解析 標籤 跟雙花括號同樣</span>"
			}
		})
	</script>
</body>

v-text 和 v-html至關於原生js中的 .text 和 .html 相同 是同樣的性質

v-pre指令

  • 顯示原始信息跳過編譯過程
  • 跳過這個元素和它的子元素的編譯過程。
  • 一些靜態的內容不須要編譯加這個指令能夠加快渲染
<body>
	<div id="app">
		<!-- 
			使用v-pre 指令 會跳過vue的編譯過程 
			因此p標籤中的{{msg}} 不會被vue識別編譯
			則頁面會直接顯示 {{msg}}
		 -->
		<p v-pre>{{msg}}</p>
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				msg: "v-pre 指令會使該語法表達式不會被識別"
			}
		})
	</script>
</body>

v-model指令

  • v-model是一個指令,限制在 <input>、<select>、<textarea>、components中使用

  • v-model是一個雙向數據綁定指令

雙向數據綁定
  • 當數據發生變化的時候,視圖也就發生變化
  • 當視圖發生變化的時候,數據也會跟着同步變化
<body>
	<div id="app">
		<span>{{msg}}</span>
		<br>
		<!-- 
			在頁面測試時 當修改 input 內容,vue實例中的msg值會跟着改變
			上面的span標籤中的值 也會跟隨 vue實例中數據改變,v-model 雙向
			綁定的好處已經很明顯了
		 -->
		<input type="text" name="" id="" v-model="msg" />
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let app = new Vue({
			el: "#app",
			data: {
				msg: "v-model指令測試"
			}
		})
	</script>
</body>

v-once指令

<body>
		<div id="app">
			<!-- 
				使用v-pre 指令 會跳過vue的編譯過程 
				因此p標籤中的{{msg}} 不會被vue識別編譯
				則頁面會直接顯示 {{msg}}
			 -->
			<p v-pre>{{msg}}</p>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					msg: "v-pre 指令會使該語法表達式不會被識別"
				}
			})
		</script>
	</body>

mvvm概念

  • MVC 是後端的分層開發概念; MVVM是前端視圖層的概念,主要關注於 視圖層分離,也就是說:MVVM把前端的視圖層,分爲了 三部分 Model, View , VM ViewModel
  • m model
    • 數據層 Vue 中 數據層 都放在 data 裏面
  • v view 視圖
    • Vue 中 view 即 咱們的HTML頁面
  • vm (view-model) 控制器 將數據和視圖層創建聯繫
    • vm 即 Vue 的實例 就是 vm

v-on指令

<body>
		<div id="app">
			<p>{{num}}</p>
			<!-- 綁定點擊事件 每點擊一下,num值++一下 通常不推薦這樣操做-->
			<button type="button" v-on:click="num++">普通點擊</button>
			<button type="button" v-on:click="handlel($event)" name="event測試">點擊</button>
			<button type="button" v-on:click="handlel2(123,222,$event)">帶參點擊</button>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					num: 0
				},
				methods: { // methods 存放調用的方法
					handlel: function(event) {
						console.log(event.target.innerHTML)
						console.log(event.target.name)
					},
					handlel2: function(p, p1, event) {
						console.log(p, p1)
						console.log(event.target.innerHTML)
						// this的指向爲當前vue實例 this.num++ 就是將num的值++
						this.num++;
					}
				}
			})
		</script>
	</body>

拓展:$event 通過對參數的對比,發現 該event傳入的是當前標籤的對象,咱們可使用該對象獲取參數類如獲取文本內容 event.target.innerHTML 或者event.target.name

按鍵修飾符

​ 在作項目中有時會用到鍵盤事件,在監聽鍵盤事件時,咱們常常須要檢查詳細的按鍵。Vue 容許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符

<body>
		<div id="app">
			<!-- 當鍵盤每點擊一次時觸發事件調用submit方法-->
			<input v-on:keyup="submit($event)" value="鍵盤點擊" />
			<!-- 指定特定的鍵盤鍵值 來調用 只有當點擊小寫a時纔會觸發 -->
			<input v-on:keyup.65="submit($event)" type="button" value="65" />
			<!-- 當鼠標鍵擡起時觸發事件 調用 mouseup 方法 -->
			<input v-on:mouseup="mouseup($event)" type="button" value="鼠標點擊" />
			<!-- 
					以上 是鍵盤鼠標事件的演示 ,還能夠拓展其餘的相似的操做、
					經常使用的按鍵修飾符
					.enter =>    enter鍵
					.tab => tab鍵
					.delete (捕獲「刪除」和「退格」按鍵) =>  刪除鍵
					.esc => 取消鍵
					.space =>  空格鍵
					.up =>  上
					.down =>  下
					.left =>  左
					.right =>  右
			-->

		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {

				},
				methods: {
					submit: function(event) {
						console.log(event.target.value);
					},
					mouseup: function(event) {
						console.log(event.target.value);
					}
				}
			})
		</script>
	</body>

自定義按鍵別名

  • 在Vue中能夠經過config.keyCodes自定義按鍵修飾符別名
<body>
		<div id="app">
			<button type="button" v-on:keydown.fn="prompt($event)" value="我是自定義按鍵">我是自定義按鍵</button>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 將 a 的 鍵值自定義成fn ,而後在控件中直接使用fn  通常狀況下不會這樣使用
			Vue.config.keyCodes.fn = 65;
			new Vue({
				el: "#app",
				methods: {
					prompt: function(event) {
						alert(event.target.value);
					}
				}
			})
		</script>
	</body>

keyCode值一覽表

虛擬鍵 十六進制值 十進制值 相應鍵盤或鼠標鍵
VK_LBUTTON 01 1 鼠標左鍵
VK_RBUTTON 02 2 鼠標右鍵
VK_CANCEL 03 3 Ctrl-Break鍵
VK_MBUTTON 04 4 鼠標中鍵
VK_BACK 08 8 Backspace鍵
VK_TAB 09 9 Tab鍵
VK_CLEAR 0C 12 Clear鍵
VK_RETURN 0D 13 Enter鍵
VK_SHIFT 10 16 Shift鍵
VK_CONTROL 11 17 Ctrl鍵
VK_MENU 12 18 Alt鍵
VK_PAUSE 13 19 Pause鍵
VK_CAPITAL 14 20 Caps Lock鍵
VK_ESCAPE 1B 27 Esc鍵
VK_SPACE 20 32 Space鍵
VK_PRIOR 21 33 Page Up鍵
VK_NEXT 22 34 Page Down鍵
VK_END 23 35 End鍵
VK_HOME 24 36 Home鍵
VK_LEFT 25 37 ←鍵
VK_UP 26 38 ↑鍵
VK_RIGHT 27 39 →鍵
VK_DOWN 28 40 ↓鍵
VK_SELECT 29 41 Select鍵
VK_PRINT 2A 42 Print鍵
VK_EXECUTE 2B 43 Execute鍵
VK_SNAPSHOT 2C 44 Print Screen鍵
VK_INSERT 2D 45 Ins鍵
VK_DELETE 2E 46 Del鍵
VK_HELP 2F 47 Help鍵
VK_0 0x30 48 0鍵
VK_1 0x 31 49 1鍵
VK_2 0x 32 50 2鍵
VK_3 0x 33 51 3鍵
VK_4 0x 34 52 4鍵
VK_5 0x 35 53 5鍵
VK_6 0x 36 54 6鍵
VK_7 0x 37 55 7鍵
VK_8 0x 38 56 8鍵
VK_9 0x 39 57 9鍵
VK_A 41 65 A鍵
VK_B 42 66 B鍵
VK_C 43 67 C鍵
VK_D 44 68 D鍵
VK_E 45 69 E鍵
VK_F 46 70 F鍵
VK_G 47 71 G鍵
VK_H 48 72 H鍵
VK_I 49 73 I鍵
VK_J 4A 74 J鍵
VK_K 4B 75 K鍵
VK_L 4C 76 L鍵
VK_M 4D 77 M鍵
VK_N 4E 78 N鍵
VK_O 4F 79 O鍵
VK_P 50 80 P鍵
VK_Q 51 81 Q鍵
VK_R 52 82 R鍵
VK_S 53 83 S鍵
VK_T 54 84 T鍵
VK_U 55 85 U鍵
VK_V 56 86 V鍵
VK_W 57 87 W鍵
VK_X 58 88 X鍵
VK_Y 59 89 Y鍵
VK_Z 5A 90 Z鍵
VK_LWIN 5B 91 左Windows鍵
VK_RWIN 5C 92 右Windows鍵
VK_APPS 5D 93 應用程序鍵
VK_SLEEP 5F 95 休眠鍵
VK_NUMPAD0 60 96 小數字鍵盤0鍵
VK_NUMPAD1 61 97 小數字鍵盤1鍵
VK_NUMPAD2 62 98 小數字鍵盤2鍵
VK_NUMPAD3 63 99 小數字鍵盤3鍵
VK_NUMPAD4 64 100 小數字鍵盤4鍵
VK_NUMPAD5 65 101 小數字鍵盤5鍵
VK_NUMPAD6 66 102 小數字鍵盤6鍵
VK_NUMPAD7 67 103 小數字鍵盤7鍵
VK_NUMPAD8 68 104 小數字鍵盤8鍵
VK_NUMPAD9 69 105 小數字鍵盤9鍵
VK_MULTIPLY 6A 106 乘號鍵
VK_ADD 6B 107 加號鍵
VK_SEPARATOR 6C 108 分割鍵
VK_SUBSTRACT 6D 109 減號鍵
VK_DECIMAL 6E 110 小數點鍵
VK_DIVIDE 6F 111 除號鍵
VK_F1 70 112 F1鍵
VK_F2 71 113 F2鍵
VK_F3 72 114 F3鍵
VK_F4 73 115 F4鍵
VK_F5 74 116 F5鍵
VK_F6 75 117 F6鍵
VK_F7 76 118 F7鍵
VK_F8 77 119 F8鍵
VK_F9 78 120 F9鍵
VK_F10 79 121 F10鍵
VK_F11 7A 122 F11鍵
VK_F12 7B 123 F12鍵
VK_F13 7C 124 F13鍵
VK_F14 7D 125 F14鍵
VK_F15 7E 126 F15鍵
VK_F16 7F 127 F16鍵
VK_F17 80 128 F17鍵
VK_F18 81 129 F18鍵
VK_F19 82 130 F19鍵
VK_F20 83 131 F20鍵
VK_F21 84 132 F21鍵
VK_F22 85 133 F22鍵
VK_F23 86 134 F23鍵
VK_F24 87 135 F24鍵
VK_NUMLOCK 90 144 Num Lock鍵
VK_SCROLL 91 45 Scroll Lock鍵
VK_LSHIFT A0 160 左Shift鍵
VK_RSHIFT A1 161 右Shift鍵
VK_LCONTROL A2 162 左Ctrl鍵
VK_RCONTROL A3 163 右Ctrl鍵
VK_LMENU A4 164 左Alt鍵
VK_RMENU A5 165 右Alt鍵

v-bind指令

  • v-bind 指令被用來響應地更新 HTML 屬性
<style type="text/css">
			/* 定義幾組樣式 */
			.p1Color {
				color: blue;
			}

			.p2Color {
				color: darkred;
			}

			.p1Text {
				font-size: 18px;
			}

			.p1Text {
				font-size: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 綁定 p1Color 並選擇isColor isColor定義爲true 也能夠直接寫true-->
			<p v-bind:class="{p1Color:isColor}">
				學習 v-bind 指令
			</p>
			<button v-on:mouseup="changeColor">{{chgColor}}</button>
			<p></p>
			<p></p>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					isColor: true,
					isText: true,
					color: "yellow",
					size: "14px",
					chgColor: "關閉樣式"
				},
				methods: {
					changeColor: function() {
						// 點擊事件 關閉開啓 p標籤的樣式
						if (this.isColor === true) {
							this.isColor = false;
							this.chgColor = "開啓樣式"
						} else {
							this.isColor = true;
							this.chgColor = "關閉樣式"
						}
					}
				}
			})
		</script>
	</body>
v-bind綁定class
<style type="text/css">
			/* 定義幾組樣式 */
			.p1Color {
				color: blue;
			}

			.p2Color {
				color: darkred;
			}

			.p1Text {
				font-size: 18px;
			}

			.p1Text {
				font-size: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 將 樣式 定義在vue實例中,而後 綁定到DOM上 -->
			  <!-- :class 等同於 v-on:calss -->
			<p :class="[colorA,textA]">
				學習 v-bind 指令
			</p>
			<button v-on:mouseup="changeAColor">{{chgColor}}</button>
			
			<p v-bind:class="[colorB,textB]">
				學習 v-bind 指令綁定 class
			</p>
			<button v-on:mouseup="changeBColor">{{chgColor}}</button>
			<p></p>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					colorA: "p1Color",
					colorB: 'p2Color',
					textA: 'p1Text',
					textB: 'p2Text',
					chgColor: "切換樣式"
				},
				/*定義 兩個 方法切換樣式 */
				methods: {
					changeAColor: function() {
						if ("p1Color" === this.colorA) {
							this.colorA = 'p2Color';
						} else {
							this.colorA = 'p1Color';
						}
					},
					changeBColor: function() {
						if ("p2Color" === this.colorB) {
							this.colorB = 'p1Color';
						} else {
							this.colorB = 'p2Color';
						}
					}
				}
			})
		</script>
	</body>
綁定對象和綁定數組 的區別
  • 綁定對象的時候 對象的屬性 即要渲染的類名 對象的屬性值對應的是 data 中的數據
  • 綁定數組的時候數組裏面存的是data 中的數據
綁定style v-bind:style
<body>
		<div id="app">
			<!-- :style 等同於 v-bind:style -->
			<p :style="{ color:colorB, fontSize:fontSize}">
				v-bind:style 樣式綁定 內聯樣式
			</p>
			<p v-bind:style="[styleB, styleA]">
				v-bind:style 樣式綁定 數組綁定
			</p>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					/* 在data裏面定義幾組 樣式數據 */
					styleObject: {
						color: "green",
						fontSize: "18px"
					},
					
					colorB:"green",
					fontSize:"18px",
					
					styleA: {
						color: "red"
					},
					styleB: {
						fontSize: "28px"
					}
				}
			})
		</script>
	</body>

分支循環

v-if指令

<body>
		<div id="app">
			<!-- 使用v-if 指令來判斷flag -->
			<p v-if="flag === true">
				{{msg}}
			</p>
			<p v-if="flag === false">
				{{msg2}}
			</p>
			<button type="button" @click="changeClick">點我</button>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					flag: true, // 設置標誌 爲true 用於頁面判斷
					msg: "我出來了",
					msg2: "我消失了"
				},
				methods: {
					changeClick: function() {
						if (this.flag === true) {
							this.flag = false;
						} else {
							this.flag = true;
						}
					}
				}
			})
		</script>
	</body>

v-show指令

<body>
		<div id="app">
			<p v-show="1===1">v-show判斷爲true時我顯示了</p>
			<p v-show="1===2">v-show爲flase時我隱藏</p>
			<!-- 使用 v-show 指令來判斷flag -->
			<p v-show="flag === true">
				{{msg}}
			</p>
			<p v-show="flag === false">
				{{msg2}}
			</p>
			<button type="button" @click="changeClick">點我</button>
		</div>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					flag: true, // 設置標誌 爲true 用於頁面判斷
					msg: "我出來了",
					msg2: "我消失了"
				},
				methods: {
					changeClick: function() {
						if (this.flag === true) {
							this.flag = false;
						} else {
							this.flag = true;
						}
					}
				}
			})
		</script>
	</body>

v-show 和 v-if的區別

  • v-show本質就是標籤display設置爲none,控制隱藏
    • v-show只編譯一次,後面其實就是控制css,而v-if不停的銷燬和建立,故v-show性能更好一點。
  • v-if是動態的向DOM樹內添加或者刪除DOM元素
    • v-if切換有一個局部編譯/卸載的過程,切換過程當中合適地銷燬和重建內部的事件監聽和子組件

v-for循環指令

<body>
		<div id="app">
			<!-- 循環遍歷 data中 items 數據 -->
			<p v-for="item in items">
				<span>id: {{item.id}} </span>
				<span>name: {{item.name}} </span>
				<span>age: {{item.age}} </span>
				<br>
			</p>

			<!-- 頁面中將會循環遍歷
			 id: 1 name: 李四 age: 20
			 
			 id: 2 name: 王五 age: 19
			 
			 id: 3 name: 張飛 age: 33
			 -->
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				// 準備 循環模擬數據
				data: {
					items: [{
							id: 1,
							name: "李四",
							age: 20
						},
						{
							id: 2,
							name: "王五",
							age: 19
						},
						{
							id: 3,
							name: "張飛",
							age: 33
						},
					]
				}
			})
		</script>
	</body>

注意點:

  • 不推薦同時使用 v-ifv-for
  • v-ifv-for 一塊兒使用時,v-for 具備比 v-if 更高的優先級。

"="和""和"="的區別

<body>
		<!-- 一個等號 是賦值的意思 主要用於js裏面 -->
		<div id="app">
			<!-- 使用雙等時 -->
			<p v-if="num == '1' ">我是雙等於 雙等於 不嚴謹 普通的數字1能夠等於字符串"1"</p>
			<!-- 使用三等時 因爲strNum定義爲字符型1 因此不等於數字型1-->
			<p v-if="strNum==='1'">我是雙等於 雙等於 不嚴謹 普通的數字1能夠等於字符串"1"</p>

			<!-- 一樣使用於其餘類型數據 eg Boolean和string的ture相對比 -->
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					// 定義一個普通的1 一個字符類型的1
					num: 1,
					strNum: '1'
				},
			})
		</script>
	</body>

四.Vue選項卡案例

<body>
		<!-- 選項卡主體 -->
		<div id="app" class="tableCard">
			<div id="" class="tableHead">
				<ul>
					<!-- 取選項卡數據 遍歷標題 -->
							<!-- defaultStyle 若是標誌id等於遍歷id則加上默認樣式 -->
					<li v-for="title in tableLists" :class="title.id===flagId?'defaultStyle':''">
						<!-- 綁定點擊事件change 傳入對應數據id -->
						<span v-on:click='change(title.id)'>{{title.title}}</span>
					</li>
				</ul>
			</div>
			<div id="" class="tableBody">
				<!-- 取選項卡數據 遍歷圖片路徑 -->
				<ul v-for="img in tableLists">
					<!-- 數據id等於標誌id 則讓改圖片顯現 -->
					<li v-if="img.id === flagId">
						<img :src="img.path" v-bind:style="showImg">
					</li>
					<!--不等於的就隱藏 -->
					<li v-else>
						<img :src="img.path">
					</li>
				</ul>
			</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- vue 實例-->
		<script type="text/javascript">
			new Vue({
				el: "#app",
				// 定義圖片樣式
				data: {
					flagId: 1,
					showImg: "display: block;",
					tableLists: [{
						id: 1,
						title: "選項卡1",
						path: "img/3Dbg01.jpg"
					}, {
						id: 2,
						title: "選項卡2",
						path: "img/3Dbg02.jpg"
					}, {
						id: 3,
						title: "選項卡3",
						path: "img/3Dbg03.jpg"
					}, ]
				},
				methods: {
					// 每點擊一次修改flagId的值爲傳入的值
					change: function(titleId) {
						this.flagId = titleId;
					}
				}
			})
		</script>
	</body>

參考demo

giteehttps://gitee.com/li_shang_shan/vue-entry-instruction-demo

相關文章
相關標籤/搜索