3. vue 系统指令
指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下 6 大类：
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
Vue 的使用基于 HTML 的模板语法，允许您以声明方式将渲染的 DOM 绑定到底层组件实例的数据。所有 Vue 模板都是语法上有效的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
指令是带有v-前缀的特殊属性。Vue 提供了许多内置指令v-html
指令的工作是在其表达式的值发生变化时对 DOM 进行响应式更新。
3.1 { { }}
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值，在标签中使用。例如：
<span>Message: {
{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。
无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会自动更新。
{ { 内容 }} 在初始化页面的时候最先会保留 { { 内容 }}, 然后被数据中的值替换
{
{ }}对JavaScript 表达式支持，例如：
{
{
number + 1 }}
{
{
ok ? 'YES' : 'NO' }}
{
{
name == 'x' ? 'true' : 'false' }}
{
{
message.split('').reverse().join('') }}
但是有个限制就是，每个绑定都只能包含单个表达式，如下表达式无效：
<!-- 这是语句，不是表达式 -->
{
{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{
{ if (true) { return message } }}
3.2 v-cloak
v-cloak会保持和元素实例的关联，直到结束编译后自动消失。
v-cloak指令和CSS 规则一起用的时候，能够解决差值表达式闪烁的问题（即：可以隐藏未编译的标签直到实例准备完毕）。
在网速很慢的情况下，一开始会直接显示{
{name}}这个内容 ，等网络加载完成了，才会显示name 属性的值。
原理: 先通过样式隐藏内容, 然后在内存中进行值的替换, 替换好之后再显示最后的结果
<html lang="en">
<head>
<style>
/*2、在样式表里设置：只要是有 v-cloak 属性的标签，我都让它隐藏。
直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 1、给 span 标签添加 v-cloak 属性 -->
<span v-cloak>{
{name}}</span>
</div>
</body>
<script src="vue2.5.16.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: 'ximingx'
}
});
</script>
</html>
3.3 v-text
v-text可以将一个变量的值渲染到指定的元素中。
与插值表达式的区别: 插值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。v-text 会覆盖元素中原本的内容。
没有闪动问题
v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题- 如果数据中有
HTML标签会将html标签一并输出 - 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
<div id="app">
<!--
注意:在指令中不要写插值语法 直接写对应的变量名称
在 v-text 中 赋值的时候不要在写 插值语法
一般属性中不加 {
{}} 直接写 对应 的数据名
-->
<p v-text="msg"></p>
<p>
<!-- Vue 中只有在标签的 内容中 才用插值语法 -->
{
{msg}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
3.4 v-html
v-text是纯文本，而v-html会被解析成html元素。
注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{
{}}或者v-text实现的不要使用v-html。
v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.
当网速比较慢时, 使用 {
{ }} 来展示数据, 有可能会产生插值闪烁问题。
<div id="app">
<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
<p>{
{
message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "<span>通过双括号绑定</span>",
html: "<span>html标签在渲染的时候被解析</span>",
text: "<span>html标签在渲染的时候被源码输出</span>",
}
});
</script>
3.4 v-pre
- 显示原始信息跳过编译过程
- 跳过这个元素和它的子元素的编译过程。
- 一些静态的内容不需要编译加这个指令可以加快渲染
<span v-pre>{
{ this will not be compiled }}</span>
<!-- 显示的是{
{ this will not be compiled }} -->
<span v-pre>{
{msg}}</span>
<!-- 即使data里面定义了msg这里仍然是显示的 {
{msg}} -->
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
3.5 v-once
- 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
- 可以提高性能
<!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js -->
<span v-once>{
{ msg}}</span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
3.6 v-on
事件绑定
例如：
<button v-on:click="num++">{
{ num }}</button>
可以简写成：
<button @click="num++">{
{ num }}</button>
事件对象的名称必须是 $event
<body>
<div id="app">
<div>{
{num}}</div>
<div>
<!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
<button v-on:click='handle1'>点击1</button>
<!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
并且事件对象的名称必须是 $event
-->
<button v-on:click='handle2(123, 456, $event)'>点击2</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event.target.innerHTML)
},
handle2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
this.num++;
}
}
});
</script>
$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象event。``$event 可以解决事件参数对象event`被覆盖的问题。
v-on 提供了click 事件，也提供了一些其他的事件。
-
v-on:click
-
v-on:keydown
-
v-on:keyup
-
v-on:mousedown
-
v-on:mouseover
-
v-on:submit
v-on的常见事件修饰符
Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
vue为v-on提供了事件修饰符，通过点(.)表示的指令后缀来调用修饰符。
注：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：
-
.stop阻止冒泡。本质是调用event.stopPropagation()。阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation(). 使用了.stop后，点击子节点不会捕获到父节点的事件 -
.prevent阻止默认事件（默认行为）。本质是调用event.preventDefault()。 -
.capture添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）。 -
.self只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。 -
.once事件只触发一次。 -
.{keyCode | keyAlias}只当事件是从侦听器绑定的元素本身触发时，才触发回调。 -
.native监听组件根元素的原生事件。
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
关键修饰符
在监听键盘事件时，我们经常需要检查特定的键。Vue 允许为v-on或@在监听键事件时添加键修饰符：
<!-- only call `vm.submit()` when the `key` is `Enter` -->
<input @keyup.enter="submit" />
您可以直接使用通过KeyboardEvent.key 修饰符公开的任何有效键名，方法是将它们转换为 kebab-case。
<input @keyup.page-down="onPageDown" />
Vue 为最常用的键提供别名：
.enter.tab.delete（捕获“删除”和“退格”键）.esc.space.up.down.left.right
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--当点击enter或者space时 时调用 `vm.alertMe()` -->
<input type="text" v-on:keyup.enter.space="alertMe" >
常用的按键修饰符
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
<script>
var vm = new Vue({
el:"#app",
methods: {
submit:function(){
},
alertMe:function(){
},
}
})
</script>
在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。同理，在 v-on 指令（简写为 @ ）所绑定的事件处理函数中，同样可以接收到事件参数对象 event，示例代码如下：
3.7 v-bind
属性绑定机制
不能在 HTML 属性中使用胡须。相反， v-bind：用于绑定属性。动态的获取属性的值， 不再是一个固定的值
他绑定的是属性 要和 { { }} 语法区分开
- 如果绑定值为null或undefined，则该属性将从呈现的元素中删除。
- 凡是有-的style属性名都要变成驼峰式，比如font-size要变成
fontSize - 值要用引号括起来
比如说：
<img v-bind:src="imageSrc +'string'">
<div v-bind:style="{ fontSize: size + 'px' }">{
{ msg }}</div>
上方代码中，给属性加了 v-bind 之后，属性值里的整体内容是表达式，属性值里的imageSrc和size是Vue实例里面的变量。
也就是说， v-bind的属性值里，可以写合法的 js 表达式。
上面两行代码也可以简写成：
<img :src="imageSrc +'string'">
<div :style="{ fontSize: size + 'px' }"></div>
Vue中通过属性绑定为元素设置class 类样式
下面这是一般的写法
<style>
.red {
color: red;
}
.thin {
font-weight: thin;
}
</style>
<h1 class="red thin"></h1>
而在 vue 中， 我们可以使用多种方式传递值
方式一： 数组
<!-- 直接传递类名 -->
<h1 :class="['red', 'thin']"></h1>
<h1 :style="[
{display: (activeName=='first'?'flex':'none')},
{fontSize: '20px'}
]"></h1>
上方代码中，注意，数组里写的是字符串；如果不加单引号，就不是字符串了，而是变量，我们一般可以用这种方式来搞事情
方式二： 三元表达式
外层也是通过数组的形式
<div id="app">
<!-- 通过data中布尔值 flag 来判断：如果 flag 为 true，就给 h1 标签添加`red`样式；否则，就不设置样式。 -->
<h1 :class="[flag ? 'red' : '']"></h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
}
});
</script>
写法三：在数组中使用 对象 来代替 三元表达式
<div id="app">
<!-- vue的写法3：在数组中使用对象来代替三元表达式。-->
<h1 :class="[ {
'thin': flag} ]"></h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true
}
});
</script>
写法四：直接使用对象
<!--
在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名。
由于 对象的属性名可带引号，也可不带引号，所以 这里我没写引号； 属性的值 是一个标识符
-->
<!-- { 类名: Boolean } -->
<h1 :class="{style1: true, style2: false}"></h1>
上方代码的意思是，给<h1>标签使用样式style1，不使用样式style2。
除此之外， 还可以这样绑定多个属性
<div v-bind="objectOfAttrs"></div>
data() {
return {
objectOfAttrs: {
id: 'container',
class: 'wrapper'
}
}
}
除此之外还可以绑定函数
<span :class="choice(data)">
{
{ formatDate(date) }}
</span>
每次组件更新时都会调用内部绑定表达式的函数，因此它们没有任何副作用，例如更改数据或触发异步操作。
3.8 v-model
双向数据绑定
重点：双向数据绑定，只能用于表单元素，或者用于自定义组件。
而 v-bind 所有元素都可以， 但他是单向绑定的
之前的文章里，我们通过v-bind，给<input>标签绑定了data对象里的name属性。当data里的name的值发生改变时，<input>标签里的内容会自动更新。但是修改 <input>标签里的内容 不会引起data里的name的值发生改变
可我现在要做的是：我在<input>标签里修改内容，要求data里的name的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用v-model这个属性。
区别：
-
v-bind：只能实现数据的单向绑定，从 M 自动绑定到 V。
-
v-model：只有
v-model才能实现双向数据绑定。注意，v-model 后面不需要跟冒号，
注意：v-model 只能运用在表单元素中，或者用于自定义组件。常见的表单元素包括：input(radio, text, address, email....) 、select、checkbox 、textarea。
我们还可以将多个复选框绑定到同一个数组或 set 值：
简单的描述
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
获取单选框中的值
<!--
1、 两个单选框需要同时通过v-model 双向绑定 一个值
2、 每一个单选框必须要有value属性 且value 值不能一样
3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据
gender 的值就是选中的值，我们只需要实时监控他的值就可以了
-->
<input type="radio" id="male" value="1" v-model='gender'>
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model='gender'>
<label for="female">女</label>
<script>
new Vue({
data: {
// 默认会让当前的 value 值为 2 的单选框选中
gender: 2,
},
})
</script>
获取复选框中的值
- 通过
v-model - 和获取单选框中的值一样
- 复选框
checkbox这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选
<script>
export default {
data() {
return {
checkedNames: []
}
}
}
</script>
<div>Checked names: {
{ checkedNames }}</div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
获取下拉框和文本框中的值
<div>
<span>职业：</span>
<!--
1、 需要给select 通过v-model 双向绑定 一个值
2、 每一个option 必须要有value属性 且value 值不能一样
3、 当某一个option选中的时候 v-model 会将当前的 value值 改变 data 中的 数据
occupation 的值就是选中的值，我们只需要实时监控他的值就可以了
-->
<!-- multiple 多选 -->
<select v-model='occupation' multiple>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
<!-- textarea 是 一个双标签 不需要绑定value 属性的 -->
<textarea v-model='desc'></textarea>
</div>
<script>
new Vue({
data: {
// 默认会让当前的 value 值为 2 和 3 的下拉框选中
occupation: ['2', '3'],
desc: 'nihao'
},
})
</script>
表单修饰符
.lazy
默认情况下，v-model在每个事件之后将输入与数据同步（上述inputIME 组合除外）。您可以添加修饰符以改为在事件后同步：lazy``change
本质: 将 input 事件切换成 change 事件
<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" />
.number
如果您希望用户输入自动转换为数字，您可以将number修饰符添加到v-model托管输入：
<input v-model.number="age" />
如果无法用 解析该值parseFloat()，则使用原始值代替。
如果输入有，number则自动应用修饰符type="number"。
.trim
如果您希望自动修剪用户输入中的空白，您可以将trim修饰符添加到您的v-model-managed 输入中：
只能去掉首尾的 不能去除中间的空格
<input v-model.trim="msg" />
拓展: v-model 的实现原理
<input :value="msg" @imput="msg = @event.target.value">{
{ msg }}</input>
3.8 v-for
- 不推荐同时使用
v-if和v-for - 当
v-if与v-for一起使用时，v-for具有比v-if更高的优先级。
我们可以使用该v-for指令基于数组呈现项目列表。该v-for指令需要格式为 的特殊语法item in items，其中items是源数据数组，item是被迭代的数组元素的别名：
<li v-for="item in items">
{
{
item.message }}
</li>
data() {
return {
items: [{
message: 'mes1' }, {
message: 'mes2' }]
}
}
<!-- 不是每一个都需要全写， 看需求 -->
<li v-for="(value, key, index) in obj1" :key="index">值：{
{value}} --- 键：{
{key}} --- index：{
{index}} </li>
<script>
new Vue({
el: '#app',
data: {
obj1: {
name: 'ximingx',
age: '20',
gender: '男'
}
}
});
</script>
与 template 类似v-if，您也可以使用<template>标签 withv-for来渲染一个包含多个元素的块。例如：
<ul>
<template v-for="item in items">
<li>{
{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
您也可以使用of作为分隔符而不是in，以便它更接近 JavaScript 的迭代器语法：
<div v-for="item of items"></div>
注意：在 Vue 2.2.0+ 版本里，当在组件中使用 v-for 时，key 属性是必须要加上的。
这样做是因为：每次 for 循环的时候，通过指定 key 来标示当前循环这一项的唯一身份。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
- key 的值只能是字符串或数字类型
- key 的值必须具有唯一性（即：key 的值不能重复）
- 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
- 使用 index 的值当作 key 的值没有任何意义（因为index 的值不具有唯一性）
- 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）, 最主要的是， 他不会给你警告， 看的心烦哎
3.9 v-if
设置元素的显示和隐藏
作用：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。
在切换时，元素和它的数据绑定会被销毁并重建。
v-if在<template>
因为v-if是一个指令，所以它必须附加到单个元素。但是如果我们想要切换多个元素怎么办？在这种情况下，我们可以v-if在一个<template>元素上使用，它作为一个不可见的包装器。最终渲染结果将不包括该<template>元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else也v-else-if可以用在<template>.
3.10 v-show
元素的显示和隐藏
作用：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 display:none属性；否则移除display:none属性。
v-show不支持该<template>元素
3.11 v-if v-show
v-if和v-show都能够实现对一个元素的隐藏和显示操作。
区别：
-
v-if：每次都会重新添加/删除DOM元素
-
v-show：每次不会重新进行DOM的添加/删除操作，只是在这个元素上添加/移除
style="display:none"属性，表示节点的显示和隐藏。
优缺点：
-
v-if：有较高的切换性能消耗。这个很好理解，毕竟每次都要进行dom的添加／删除操作。
-
v-show：有较高的初始渲染消耗。也就是说，即使一开始
v-show="false"，该节点也会被创建，只是隐藏起来了。而v-if="false"的节点，根本就不会被创建。
总结：
- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
- 由于隐含优先级，不建议在同一元素上使用and
v-if。当v-if和v-for都用于同一个元素时，v-if将首先评估。
3.12 自定义指令
- 内置指令不能满足我们特殊的需求
- Vue允许我们自定义指令
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<!--
使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。
-->
<input v-focus>
</div>
<script>
const app = Vue.createApp({
})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
// 当被绑定的元素挂载到 DOM 中时……
mounted(el) {
// 聚焦元素
el.focus()
}
})
app.mount('#app')
</script>
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
<script>
const app = {
data() {
return {
}
},
directives: {
focus: {
// 指令的定义
mounted(el) {
el.focus()
}
}
}
}
</script>
<input type="text" v-color='msg'>
<input type="text" v-focus>
<script type="text/javascript">
/*
自定义指令-局部指令
*/
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'red'
}
},
// 局部指令，需要定义在 directives 的选项
directives: {
color: {
// binding 为自定义的函数形参 通过自定义属性传递过来的值 存在 binding.value 里面
bind: function(el, binding){
el.style.backgroundColor = binding.value.color;
}
},
focus: {
inserted: function(el) {
el.focus();
}
}
}
});
</script>
指令定义函数提供了几个钩子函数（可选）：
created: 在绑定元素的属性或事件监听器被应用之前调用。beforeMount: 指令第一次绑定到元素并且在挂载父组件之前调用。。mounted: 在绑定元素的父组件被挂载后调用。。beforeUpdate: 在更新包含组件的 VNode 之前调用。。updated: 在包含组件的 VNode 及其子组件的 VNode 更新后调用。beforeUnmount: 当指令与在绑定元素父组件卸载之前时，只调用一次。unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次。
钩子函数的参数有：
el
- el 指令绑定到的元素。这可用于直接操作 DOM。
binding
binding 是一个对象，包含以下属性：
instance：使用指令的组件实例。value：**传递给指令的值。**例如，在v-my-directive="1 + 1"中，该值为2。oldValue：先前的值，仅在beforeUpdate和updated中可用。值是否已更改都可用。arg：参数传递给指令 (如果有)。例如在v-my-directive:foo中，arg 为"foo"。modifiers：包含修饰符 (如果有) 的对象。例如在v-my-directive.foo.bar中，修饰符对象为{foo: true，bar: true}。dir：一个对象，在注册指令时作为参数传递。
3.13 tabbar
<body>
<div id="app">
<div class="tab">
<ul>
<li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{
{item.title}}</li>
</ul>
<div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
<img :src="item.path">
</div>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
*/
var vm = new Vue({
el: '#app',
data: {
currentIndex: 0, // 选项卡当前的索引
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
},{
id: 2,
title: 'orange',
path: 'img/orange.png'
},{
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
},
methods: {
change: function(index){
// 在这里实现选项卡切换操作：本质就是操作类名
// 如何操作类名？就是通过currentIndex
this.currentIndex = index;
}
}
});
</script>
</body>