VUE基础笔记壹日

最新推荐文章于 2023-07-12 21:55:33 发布

索西引擎

最新推荐文章于 2023-07-12 21:55:33 发布

阅读量249

点赞数

分类专栏： # HTML&CSS&JavaScript&Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_39518871/article/details/111246767

版权

HTML&CSS&JavaScript&Vue 专栏收录该内容

47 篇文章

订阅专栏

本文围绕VUE框架展开，先介绍其概述，包括渐进式特点、易用灵活高效等优势。接着阐述基本使用，对比传统开发模式。重点讲解模板语法，如指令、双向数据绑定、事件绑定、属性和样式绑定、分支循环结构等，还通过简单计算器和TAB选项卡案例加深理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提准备

VScode 的VUE代码格式化插件及配置

1. VUE概述

VUE：渐进式JavaScript框架
声明式渲染 > 组件系统 > 客户端路由 > 集中式状态管理 > 项目构建

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手VUE。
灵活：在一个库和一套完整框架之间伸缩自如。
高效：20KB运行大小，超快虚拟DOM。

2. VUE基本使用

2.1 传统开发模式对比

原生JS

    <div id="msg"></div>
    <script type="text/javascript">
      var msg = "Hello World";
      var div = document.getElementById("msg");
      div.innerHTML = msg;
    </script>

jQuery

    <div id="msg"></div>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
      var msg = "Hello World";
      $("#msg").html(msg);
    </script>

2.2 VUE开发模式

VUE 的基本使用

需要提供标签让用户填充数据
引入vue.js库文件
首先到官网下载开发版本的库文件，之后讲库文件引入到项目开发文件中。
可以使用vue的语法完成任务
把vue提供的数据填充到标签里面

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
      <div id="app">
          <div> {{msg}} </div>
      </div>
      <script src="js/vue.js" type="text/javascript"></script>
    <script type="text/javascript">
    // VUE 的基本使用
    // 1. 需要提供标签用户填充数据
    // 2. 引入vue.js库文件
    // 3. 可以使用vue的语法完成任务
    // 4. 把vue提供的数据填充到标签里面
    var vm= new Vue({
        el: '#app',
        data: {
            msg: 'Hello VUE!'
        }
    });
    </script>
  </body>
</html>

2.2.1 实例参数分析

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）

2.2.2 插值表达式用法

将数据填充到HTML标签中。
插值表达式支持基本的计算操作。

2.2.3 VUE代码运行原理分析

概述编译过程的概念（VUE语法>原生语法）。

3. VUE模板语法

3.1 模板语法概述

3.1.1 模板的作用

把数据填充到HTML标签中，即渲染。

3.1.2 前端渲染方式

原生JS拼接字符串。
使用前端模板引擎。
使用VUE特有的模板语法。

3.1.3 原生JS拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标签中，前端代码风格大体上如右图所示。

缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。

      var d = data.weather;
      var info = document.getElementById("info");
      info.innerHTML = "";
      for (var i = 0; i < d.length; i++) {
        var date = d[i].date;
        var day = d[i].info.day;
        var night = d[i].info.night;
        var tag = "";
        tag += "<span>日期：" + date + "</span><ul>";
        tag += "<li>白天天气：" + day[1] + "</li>";
        tag += "<li>白天温度：" + day[2] + "</li>";
        tag += "<li>白天风向：" + day[3] + "</li>";
        tag += "<li>白天风速：" + day[4] + "</li>";
        tag += "</ul>";
        var div = document.createElement("div");
        div.innerHTML = tag;
        info.appendChild(div);
      }

3.1.4 使用前端模板引擎

以下为基于模板引擎 art-template 的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。

    <script id="abc" type="text/html">
      {{if isAdmin}}
      <h1>{{title}}</h1>
      <ul>
        {{each list as value i}}
        <li>索引 {{i+1}}：{{value}}</li>
        {{/each}}
      </ul>
      {{/if}}
    </script>

优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。
缺点：没有专门提供事件机制。

3.1.5 模板语法概述

差值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

3.2 指令

3.2.1 什么是指令

指令的本质就是自定义属性。
指令的格式：以 v- 开始，例如：v-cloak

3.2.2 `v-cloak` 指令用法

插值表达式存在的问题：闪动。
如何解决该问题：使用 v-cloak 指令。
解决该问题的原理：先隐藏，替换好后再显示最终的值。
详见官网：https://cn.vuejs.org/v2/api/

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  [v-cloak]{
    display: none;
  }
  </style>
</head>
<body>
  <div id="app">
    <div v-cloak>{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-cloak指令的用法
      1、提供样式
        [v-cloak]{
          display: none;
        }
      2、在插值表达式所在的标签中添加v-cloak指令
      背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'
      }
    });
  </script>
</body>
</html>

3.2.3 数据绑定指令

v-text 填充纯文本

比差值表达式更加简洁。

v-html 填充HTML片段

存在安全问题
本网站内部数据可以使用，来自第三方的数据不可以用。

v-pre 填充原始信息

显示原始信息，跳过编译过程（分析编译过程）。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{{msg}}</div>
      <div v-text="msg"></div>
      <div v-html="msg1"></div>
      <div v-pre>{{msg}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
      1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
      2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
      3、v-pre用于显示原始信息
    */
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello Vue",
          msg1: "<h1>HTML</h1>",
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

3.2.4 数据响应式

如何理解响应式

html5 中的响应式（屏幕尺寸的变化导致样式的变化）
数据的响应式（数据的变化导致页面内容的变化）

什么是数据绑定

数据绑定：将数据填充到标签中

v-once 只编译一次

显示内容之后不再具有响应式功能。

3.3 双向数据绑定

3.3.1 什么是双向数据绑定？

3.3.2 双向数据绑定分析

v-mode指令用法

<input type='text' v-model='uname'/>

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{{msg}}</div>
      <div>
        <input type="text" v-model="msg" />
      </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
        双向数据绑定
        1、从页面到数据
        2、从数据到页面
      */
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello Vue",
        },
      });
    </script>
  </body>
</html>

3.3.3 MVVM设计思想

M(model)、V(view)、VM(View-Model)
在这里插入图片描述

3.4 事件绑定

3.4.1 VUE如何处理事件

v-on 指令用法

<input type='button' v-on:click='num++'/>

v-on 简写形式

<input type='button' @click='num++'/>

3.4.2 事件函数的调用方式

直接绑定函数名称

<button v-on:click='say'>Hello</button>

调用函数

<button v-on:click='say()'>Say hi</button>

  <body>
    <div id="app">
      <div>{{num}}</div>
      <div>
        <button v-on:click="num++">点击</button>
        <button @click="num++">点击1</button>
        <button @click="handle">点击2</button>
        <button @click="handle()">点击3</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 中 主要是定义一些函数
        methods: {
          handle: function () {
            // 这里的this是Vue的实例对象+
            console.log(this === vm);
            //   在函数中 想要使用data里面的数据 一定要加this
            this.num++;
          },
        },
      });
    </script>
  </body>

3.4.3 事件函数参数传递

普通参数和事件对象

<button v-on:click='say("hi",$event)'>Say hi</button>

<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>
</body>

3.4.4 事件修饰符

.stop 组织冒泡

<a v-on:click.stop="handle">跳转</a>

.prevent 阻止默认行为

<a v-on:click.prevent="handle">跳转</a>

<body>
  <div id="app">
    <div>{{num}}</div>
    <div v-on:click='handle0'>
      <button v-on:click.stop='handle1'>点击1</button>
    </div>
    <div>
      <a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
    </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: {
        handle0: function(){
          this.num++;
        },
        handle1: function(event){
          // 阻止冒泡
          // event.stopPropagation();
        },
        handle2: function(event){
          // 阻止默认行为
          // event.preventDefault();
        }
      }
    });
  </script>
</body>

3.4.5 按键修饰符

.enter 回车键

<input v-on:keyup.enter='submit'>

.delete 删除键

<input v-on:keyup.delete='handle'>

<body>
  <div id="app">
    <form action="">
      <div>
        用户名：
        <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
      </div>
      <div>
        密码：
        <input type="text" v-on:keyup.f1='handleSubmit' v-model='pwd'>
      </div>
      <div>
        <input type="button" v-on:click='handleSubmit' value="提交">
      </div>
    </form>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-按键修饰符
    */
    Vue.config.keyCodes.f1 = 113
    var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
        pwd: '',
        age: 0
      },
      methods: {
        clearContent:function(){
          // 按delete键的时候，清空用户名
          this.uname = '';
        },
        handleSubmit: function(){
          console.log(this.uname,this.pwd)
        }
      }
    });
  </script>
</body>

3.4.6 自定义按键修饰符

全局 config.keyCodes 对象

Vue.config.keyCodes.f1 = 112;

  <body>
    <div id="app">
      <input type="text" v-on:keyup.aaa="handle" v-model="info" />
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
      事件绑定-自定义按键修饰符
      规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    */
      Vue.config.keyCodes.aaa = 65;
      var vm = new Vue({
        el: "#app",
        data: {
          info: "",
        },
        methods: {
          handle: function (event) {
            console.log(event.keyCode);
          },
        },
      });
    </script>
  </body>

案例：简单计算器

在这里插入图片描述

  <body>
    <div id="app">
      <h1>简单计算器</h1>
      <div>
        <span>数值A:</span>
        <span>
          <input type="text" v-model="a" />
        </span>
      </div>
      <div>
        <span>数值B:</span>
        <span>
          <input type="text" v-model="b" />
        </span>
      </div>
      <div>
        <button v-on:click="handle">计算</button>
      </div>
      <div>
        <span>计算结果:</span>
        <span v-text="result"></span>
      </div>
    </div>
    <script src="js/vue.js" type="text/javascript"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el: "#app",
        data: {
          a: "",
          b: "",
          result: "",
        },
        methods: {
          handle: function () {
            // 实现计算逻辑
            this.result = parseInt(this.a) + parseInt(this.b);
          },
        },
      });
    </script>
  </body>

3.5 属性绑定

3.5.1 VUE如何动态处理属性

v-bind指令用法

<a v-bind:href='url'>跳转</a>

缩写形式

<a :href='url'>跳转</a>

<body>
  <div id="app">
    <a v-bind:href="url">百度</a>
    <a :href="url">百度1</a>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      属性绑定
    */
    var vm = new Vue({
      el: '#app',
      data: {
        url: 'http://www.baidu.com'
      },
      methods: {
        handle: function(){
          // 修改URL地址
          this.url = 'http://itcast.cn';
        }
      }
    });
  </script>
</body>

3.5.2 `v-model`的低层实现原理分析

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

<body>
  <div id="app">
    <div>{{msg}}</div>
    <input type="text" v-bind:value="msg" v-on:input='handle'>
    <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
    <input type="text" v-model='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-model指令的本质

    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      methods: {
        handle: function(event){
          // 使用输入域中的最新的数据覆盖原来的数据
          this.msg = event.target.value;
        }
      }
    });
  </script>
</body>

3.6 样式绑定

3.6.1 `class`样式处理

对象语法：<div v-bind:class="{ active: isActive }"></div>。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active {
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class="{active: isActive,error: isError}">
      测试样式
    </div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定
    */
    var vm = new Vue({
      el: '#app',
      data: {
        isActive: true,
        isError: true
      },
      methods: {
        handle: function(){
          // 控制isActive的值在true和false之间进行切换
          this.isActive = !this.isActive;
          this.isError = !this.isError;
        }
      }
    });
  </script>
</body>
</html>

数组语法：<div v-bind:class="[activeClass, errorClass]"></div>。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .active {
        border: 1px solid red;
        width: 100px;
        height: 100px;
      }
      .error {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-bind:class="[activeClass, errorClass]">测试样式</div>
      <button v-on:click="handle">切换</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
      样式绑定
    */
      var vm = new Vue({
        el: "#app",
        data: {
          activeClass: "active",
          errorClass: "error",
        },
        methods: {
          handle: function () {
            this.activeClass = "";
            this.errorClass = "";
          },
        },
      });
    </script>
  </body>
</html>

样式绑定相关语法细节：

对象绑定和数组绑定可以结合使用
class绑定的值可以简化操作
默认的class如何处理？默认的class会保留

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .active {
        border: 1px solid red;
        width: 100px;
        height: 100px;
      }
      .error {
        background-color: orange;
      }
      .test {
        color: blue;
      }
      .base {
        font-size: 28px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-bind:class="[activeClass, errorClass, {test: isTest}]">
        测试样式
      </div>
      <div v-bind:class="arrClasses"></div>
      <div v-bind:class="objClasses"></div>
      <div class="base" v-bind:class="objClasses"></div>

      <button v-on:click="handle">切换</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
      样式绑定相关语法细节：
      1、对象绑定和数组绑定可以结合使用
      2、class绑定的值可以简化操作
      3、默认的class如何处理？默认的class会保留
      
    */
      var vm = new Vue({
        el: "#app",
        data: {
          activeClass: "active",
          errorClass: "error",
          isTest: true,
          arrClasses: ["active", "error"],
          objClasses: {
            active: true,
            error: true,
          },
        },
        methods: {
          handle: function () {
            // this.isTest = false;
            this.objClasses.error = false;
          },
        },
      });
    </script>
  </body>
</html>

3.6.2 `style`样式处理

对象语法：<div v-bind: style="{ color: activeColor, fontSize: fontSize }"></div>。
数组语法：<div v-bind: style="[baseStyles, overridingStyles]"></div>。

<body>
  <div id="app">
    <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
    <div v-bind:style='objStyles'></div>
    <div v-bind:style='[objStyles, overrideStyles]'></div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定之内联样式Style：  
    */
    var vm = new Vue({
      el: '#app',
      data: {
        borderStyle: '1px solid blue',
        widthStyle: '100px',
        heightStyle: '200px',
        objStyles: {
          border: '1px solid green',
          width: '200px',
          height: '100px'
        },
        overrideStyles: {
          border: '5px solid orange',
          backgroundColor: 'blue'
        }
      },
      methods: {
        handle: function(){
          this.heightStyle = '100px';
          this.objStyles.width = '100px';
        }
      }
    });
  </script>
</body>

3. VUE模板语法

3.7 分支循环结构

3.7.1 分支结构

v-if、v-else、v-else-if、v-show。

3.7.2 `v-if` 与 `v-show` 的区别

v-if控制元素是否渲染到页面。
v-show控制元素是否显示（已经渲染到了页面）。

<body>
  <div id="app">
    <div v-if='score>=90'>优秀</div>
    <div v-else-if='score<90&&score>=80'>良好</div>
    <div v-else-if='score<80&&score>60'>一般</div>
    <div v-else>比较差</div>
    <div v-show='flag'>测试v-show</div>
    <button v-on:click='handle'>点击</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      分支结构
      v-show的原理：控制元素样式是否显示 display:none
    */
    var vm = new Vue({
      el: '#app',
      data: {
        score: 10,
        flag: false
      },
      methods: {
        handle: function(){
          this.flag = !this.flag;
        }
      }
    });
  </script>
</body>

3.7.3 循环结构

v-for遍历数组

<li v-for='item in list'> {{ item }} </li>

<li v-for='(item, index) in list'>{{item + '---' + index}}</li>

key的作用：帮助VUE区分不同的元素，从而提高性能。

<li :key='item.id' v-for='(item, index) in list'>{{item}} + '---' + {{index}}</li>

<body>
  <div id="app">
    <div>水果列表</div>
    <ul>
      <li v-for='item in fruits'>{{item}}</li>
      <li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
      <li :key='item.id' v-for='(item, index) in myFruits'>
        <span>{{item.ename}}</span>
        <span>-----</span>
        <span>{{item.cname}}</span>
      </li>

    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      循环结构-遍历数组
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fruits: ['apple', 'orange', 'banana'],
        myFruits: [{
          id: 1,
          ename: 'apple',
          cname: '苹果'
        },{
          id: 2,
          ename: 'orange',
          cname: '橘子'
        },{
          id: 3,
          ename: 'banana',
          cname: '香蕉'
        }]
      }
    });
  </script>
</body>

v-for遍历对象

<div v-for='(value, key, index) in object'></div>

v-if和v-for结合使用

<div v-if='value==12' v-for='(value, key, index) in object'></div>

<body>
  <div id="app">
    <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    // 使用原生js遍历对象
    var obj = {
      uname: 'lisi',
      age: 12,
      gender: 'male'
    }
    for(var key in obj) {
      console.log(key, obj[key])
    }
    /*
      循环结构
    */
    var vm = new Vue({
      el: '#app',
      data: {
        obj: {
          uname: 'zhangsan',
          age: 13,
          gender: 'female'
        }
      }
    });
  </script>
</body>

4. 案例：TAB选项卡

1. 实现静态UI效果

用传统的方式实现标签结构和样式。

2. 基于数据重构UI效果

将静态的结构和样式重构为基于VUE模板语法的形式。
处理事件绑定和JS控制逻辑。

3. 声明式编程

模板的结构和最终显示的效果基本一致。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .tab ul {
        overflow: hidden;
        padding: 0;
        margin: 0;
      }

      .tab ul li {
        box-sizing: border-box;
        padding: 0;
        float: left;
        width: 100px;
        height: 45px;
        line-height: 45px;
        list-style: none;
        text-align: center;
        border-top: 1px solid blue;
        border-right: 1px solid blue;
        cursor: pointer;
      }

      .tab ul li:first-child {
        border-left: 1px solid blue;
      }

      .tab ul li.active {
        background-color: orange;
      }

      .tab div {
        width: 500px;
        height: 300px;
        display: none;
        text-align: center;
        font-size: 30px;
        line-height: 300px;
        border: 1px solid blue;
        border-top: 0px;
      }

      .tab div.current {
        display: block;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <p>增加tab栏 <input type="text" /></p>
      <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>
</html>