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
三.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例項之下。
在寫例項vue時 要注意 屬性和 屬性名之間的空格
- 指令
- 本質就是自定義屬性
- 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片段填充到標籤中
-
可能有安全問題, 一般只在可信任內容上使用
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-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="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
gitee: https://gitee.com/li_shang_shan/vue-entry-instruction-demo