Vue入門常用指令-有解無憂

一.Vue 介紹

? Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動，

二.使用方法

下載到本地參考：

? 開發版： https://cn.vuejs.org/js/vue.js

? 生產版：https://cn.vuejs.org/js/vue.min.js

在線參考：

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

npm安裝:

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

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

三.vue入門指令

vue實體創建

<body>
		<!--  定義id為app作為 錨點 -->
		<p id="app">
			<!-- vue 運算式{{}} 兩個花括號 ，里面是資料名-->
			{{msg}}
		</p>
		<!-- 引入 vue.js -->
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/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實體之下，

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

指令
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="https://www.cnblogs.com/2979100039-qq-con/p/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片段填充到標簽中
可能有安全問題, 一般只在可信任內容上使用 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="https://www.cnblogs.com/2979100039-qq-con/p/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="https://www.cnblogs.com/2979100039-qq-con/p/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="https://www.cnblogs.com/2979100039-qq-con/p/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="https://www.cnblogs.com/2979100039-qq-con/p/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="https://www.cnblogs.com/2979100039-qq-con/p/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="https://www.cnblogs.com/2979100039-qq-con/p/鍵盤點擊" />
			<!-- 指定特定的鍵盤鍵值 來呼叫 只有當點擊小寫a時才會觸發 -->
			<input v-on:keyup.65="submit($event)" type="button" value="https://www.cnblogs.com/2979100039-qq-con/p/65" />
			<!-- 當滑鼠鍵抬起時觸發事件 呼叫 mouseup 方法 -->
			<input v-on:mouseup="mouseup($event)" type="button" value="https://www.cnblogs.com/2979100039-qq-con/p/滑鼠點擊" />
			<!-- 
					以上 是鍵盤滑鼠事件的演示 ，還可以拓展其他的類似的操作、
					常用的按鍵修飾符
					.enter =>    enter鍵
					.tab => tab鍵
					.delete (捕獲“洗掉”和“退格”按鍵) =>  洗掉鍵
					.esc => 取消鍵
					.space =>  空格鍵
					.up =>  上
					.down =>  下
					.left =>  左
					.right =>  右
			-->

		</div>

		<script src="https://www.cnblogs.com/2979100039-qq-con/p/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="https://www.cnblogs.com/2979100039-qq-con/p/我是自定義按鍵">我是自定義按鍵</button>
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/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:>
				學習 v-bind 指令
			</p>
			<button v-on:mouseup="changeColor">{{chgColor}}</button>
			<p></p>
			<p></p>
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/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 :>
				學習 v-bind 指令
			</p>
			<button v-on:mouseup="changeAColor">{{chgColor}}</button>
			
			<p v-bind:>
				學習 v-bind 指令系結 class
			</p>
			<button v-on:mouseup="changeBColor">{{chgColor}}</button>
			<p></p>
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/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="https://www.cnblogs.com/2979100039-qq-con/p/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="https://www.cnblogs.com/2979100039-qq-con/p/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="https://www.cnblogs.com/2979100039-qq-con/p/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="https://www.cnblogs.com/2979100039-qq-con/p/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-if 和 v-for
當 v-if 與 v-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="https://www.cnblogs.com/2979100039-qq-con/p/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" >
			<div id="" >
				<ul>
					<!-- 取選項卡資料 遍歷標題 -->
							<!-- defaultStyle 如果標志id等于遍歷id則加上默認樣式 -->
					<li v-for="title in tableLists" :>
						<!-- 系結點擊事件change 傳入對應資料id -->
						<span v-on:click='change(title.id)'>{{title.title}}</span>
					</li>
				</ul>
			</div>
			<div id="" >
				<!-- 取選項卡資料 遍歷圖片路徑 -->
				<ul v-for="img in tableLists">
					<!-- 資料id等于標志id 則讓改圖片顯現 -->
					<li v-if="img.id === flagId">
						<img :src="https://www.cnblogs.com/2979100039-qq-con/p/img.path" v-bind:style="showImg">
					</li>
					<!--不等于的就隱藏 -->
					<li v-else>
						<img :src="https://www.cnblogs.com/2979100039-qq-con/p/img.path">
					</li>
				</ul>
			</div>
		</div>
		<script src="https://www.cnblogs.com/2979100039-qq-con/p/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

gitee： https://gitee.com/li_shang_shan/vue-entry-instruction-demo

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/228842.html

標籤：Html/Css

上一篇：HTTP與HTTPS

下一篇：過渡問題，opacity與dispaly的使用

Vue入門常用指令