Vue2之基础介绍和指令与过滤器

一、简介
- 1、概念
- 2、vue的两个特性
- - 2.1 数据驱动视图
  - 2.2 双向数据绑定
- 3、MVVM
二、vue基础用法
- 1、导入vue.js的script脚本文件
- 2、在页面中声明一个将要被vue所控制的DOM区域
- 3、创建vm实例对象（vue实例对象）
- 4、样例完整代码
三、指令与过滤器
- 1、指令的概念
- 2、六大类指令
- 3、内容渲染指令
- - 3.1 介绍
  - 3.2 三个种类
  - 3.3 v-text
  - 3.4 插值表达式
  - 3.5 v-html
  - 3.6 完整代码
- 4、v-bind 属性绑定指令
- - 4.1 v-bind
  - 4.2 完整代码
- 5、在插值和属性绑定中编写JS语句
- - 5.1 用插值表达式计算
  - 5.2 操作插值表达式的内容
  - 5.3 动态拼接内容
  - 5.4 完整代码
- 6、v-on 事件绑定指令
- - 6.1 v-on介绍
  - 6.2 函数的简写形式
  - 6.3 完整代码
  - 6.4 通过this访问数据源中的数据
  - 6.5 v-on的简写形式
  - 6.6 $event
  - 6.7 注意
- 7、@click 事件修饰符
- - 7.1 介绍
  - 7.2 示例代码
  - 7.3 完整代码
- 8、@keyup 按键修饰符
- - 8.1 介绍
  - 8.2 示例代码
  - 8.3 完整代码
- 9、v-model 双向数据绑定
- - 9.1 双向数据绑定指令
  - 9.2 适用环境
  - 9.3 相关代码
  - 9.4 完整代码
- 10、v-model 指令修饰符
- - 10.1 三种修饰符
  - 10.2 完整代码
- 11、条件渲染指令
- - 11.1 介绍
  - 11.2 两种渲染指令
  - 11.3 完整代码
  - 11.4 注意
- 12、v-if 配套指令
- - 12.1 v-else
  - 12.2 完整代码
- 13、列表渲染指令
- - 13.1 介绍
  - 13.2 v-for中的索引
  - 13.3 示例代码
  - 13.4 使用key值得注意事项
  - 13.5 完整代码

一、简介

1、概念

Vue是一套用于构建用户界面的前端框架。

2、vue的两个特性

2.1 数据驱动视图

在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构。
（1）优点
当页面数据发生变化时，页面会自动重新渲染。
（2）注意
数据驱动视图是单向的数据绑定。

2.2 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。
在网页中，form表单负责采集数据，Ajax负责提交数据。
js数据的变化，会被自动渲染到页面上
页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中。
（1）优点
开发者不再需要手动操作DOM元素，来获取表单元素最新的值。

3、MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model层、View层和ViewModel层。
Model表示当前页面渲染时，所依赖的数据源。
View表示当前页面所渲染的DOM结构
ViewModel表示vue的实例，它是MVVM的核心

二、vue基础用法

1、导入vue.js的script脚本文件

<script src="./lib/vue-2.6.14.js"></script>

2、在页面中声明一个将要被vue所控制的DOM区域

<div id="app">{{username}}</div>

3、创建vm实例对象（vue实例对象）

const vm = new Vue({
  // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
  // 相当于 view层
  el: '#app',

  // data对象就是要渲染到页面上的数据
  // 相当于 model层
  data: {
    username: 'zhangsan'
  }
})

4、样例完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{username}}</div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                username: 'zhangsan'
            }
        })
    </script>
</body>
</html>

三、指令与过滤器

1、指令的概念

指令（Directives）是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

2、六大类指令

（1）内容渲染指令
（2）属性绑定指令
（3）事件绑定指令
（4）双向绑定指令
（5）条件渲染指令
（6）列表渲染指令

3、内容渲染指令

3.1 介绍

内容渲染指令用来辅助开发者渲染DOM元素的文本内容

3.2 三个种类

（1）v-text
（2）{{}}
（3）v-html

3.3 v-text

（1）相关应用

 <p v-text="username">姓名：</p>

（2）结果
在这里插入图片描述

（3）缺点
v-text指令会覆盖元素内默认的值

3.4 插值表达式

（1）介绍
vue提供的{{}}语法，专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法的专业名称是插值表达式。在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容。
（2）相关应用

<p>性名：{{username}} </p>

（3）结果
在这里插入图片描述
（4）注意
插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中。

3.5 v-html

（1）介绍
v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要用到v-html。
（2）相关应用

<div v-html="info"></div>

（3）结果
在这里插入图片描述

3.6 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-text="username"></p>
        <p v-text="gender"></p>

        <hr>

        <p>性名：{{username}} </p>
        <p>性别：{{gender}} </p>

        <hr>

        <div v-html="info"></div>
    
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                username: 'zhangsan',
                gender: '女',
                info: '<h4 style="color:red; font-weight:blod;">你好，世界</h4>'
            }
        })
    </script>
</body>
</html>

4、v-bind 属性绑定指令

4.1 v-bind

（1）介绍
v-bind属性绑定指令为元素的属性动态绑定属性值。
（2）相关应用

<input type="text" v-bind:placeholder="tips">

（3）结果
在这里插入图片描述

（4）v-bind也可以简写成 : ，作用是一样的

<img :src="photo" alt="" style="width:150px">

4.2 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:placeholder="tips">

        <hr>

        <img :src="photo" alt="" style="width:150px">
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                tips: '请输入用户名',
                photo: 'https://img-home.csdnimg.cn/images/20201124032511.png'
            }
        })
    </script>
</body>
</html>

5、在插值和属性绑定中编写JS语句

5.1 用插值表达式计算

<div>1 + 2的结果是:{{1 + 2}}</div>

结果
在这里插入图片描述

5.2 操作插值表达式的内容

<div>{{tips}},反转后为:{{tips.split('').reverse().join('')}}</div>

结果
在这里插入图片描述

5.3 动态拼接内容

在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号。

<div :title="'box' + index">这是一个div</div>

5.4 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>1 + 2的结果是:{{1 + 2}}</div>
        <div>{{tips}},反转后为:{{tips.split('').reverse().join('')}}</div>
        <div :title="'box' + index">这是一个div</div>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                tips: '请输入用户名',
                photo: 'https://img-home.csdnimg.cn/images/20201124032511.png',
                index: 3
            }
        })
    </script>
</body>
</html>

6、v-on 事件绑定指令

6.1 v-on介绍

vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。

6.2 函数的简写形式

: function() 可以简写为（）

 add: function(){}   ===   add(){}

6.3 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>count的值是: {{count}}</p>
        <button v-on:click="add">展示1</button>
        <button v-on:click="sub">展示2</button>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                count: 0
            },
            // methods的作用就是定义事件的处理函数
            methods: {
                add: function(){
                    console.log('ok')
                },
                sub(){
                    console.log('触发了sub处理函数')
                }
            }
        })
    </script>
</body>
</html>

6.4 通过this访问数据源中的数据

（1）相关应用

sub(){
    this.count -= 1
}

（2）绑定事件并传参

1.body里的代码
<button v-on:click="add(2)">+1</button>

2.methods里的代码
add(n){
     // vm.count += n
     this.count += n
}

（3）相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>count的值是: {{count}}</p>
        <!--绑定事件处理函数的时候，可以使用()传递参数-->
        <button v-on:click="add(2)">+1</button>
        <button v-on:click="sub">-1</button>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                count: 0
            },
            // methods的作用就是定义事件的处理函数
            methods: {
                add(n){
                    // vm.count += n
                    this.count += n
                },
                sub(){
                    this.count -= 1
                }
            }
        })
    </script>
</body>
</html>

6.5 v-on的简写形式

v-on可以简写为@

 <button v-on:click="add">+1</button>

 等价于

  <button @click="add">+1</button>

6.6 $event

（1）介绍
vue提供了内置变量，叫做 $e v e n t ，它就是原生 D OM 的事件对象。（ 2 ）应用场景当函数开始传参，而又想要控制该 D OM 对象时，则可以通过$ event来操作。
（3）相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>count的值是: {{count}}</p>
        <button v-on:click="add(1, $event)">+1</button>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                count: 0
            },
            // methods的作用就是定义事件的处理函数
            methods: {
                add(n,e){
                    // vm.count += n
                    this.count += n

                    // 判断this.count的值是否为偶数
                    if(this.count % 2 === 0){
                        // 偶数
                        e.target.style.backgroundColor = 'red'
                    } else {
                        // 奇数
                        e.target.style.backgroundColor = ''
                    }
                },
            }
        })
    </script>
</body>
</html>

6.7 注意

原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形势后为v-on:click、v-on:input、v-on:keyup

7、@click 事件修饰符

7.1 介绍

在事件处理函数中调用event.preventDefault()或者event.stopPropagation()是非常常见的需求。
.prevent 阻止默认行为（例如阻止链接的跳转，表单的提交）
.stop 阻止事件冒泡。
.capture 以捕获模式触发当前的事件处理函数。
.once 绑定的事件只触发1次。
.self 只有在event.target是当前元素自身时，触发事件处理函数。

7.2 示例代码

阻止链接跳转

<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>

7.3 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                count: 0
            },
            // methods的作用就是定义事件的处理函数
            methods: {
                show(){
                    console.log("点击了链接")
                }
            }
        })
    </script>
</body>
</html>

8、@keyup 按键修饰符

8.1 介绍

在监听键盘事件时，需要判断详细的按键，可以为键盘相关的事件添加按键修饰符。

8.2 示例代码

<input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">

8.3 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                
            },
            // methods的作用就是定义事件的处理函数
            methods: {
                clearInput(e){
                    console.log("触发了clearInput方法")
                    e.target.value = ''
                },
                commitAjax(){
                    console.log('触发了commitAjax请求')
                }
            }
        })
    </script>
</body>
</html>

9、v-model 双向数据绑定

9.1 双向数据绑定指令

vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。

9.2 适用环境

（1）input输入框
type=“radio”
type=“checkbox”
type=“xxxxx”
（2）textarea
（3）select

9.3 相关代码

<p>用户的名字是：{{username}}</p>
<input type="text" v-model="username">
<hr>
<select v-model="city">
    <option value="">请选择城市</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>

9.4 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>用户的名字是：{{username}}</p>
        <input type="text" v-model="username">
        <hr>
        <select v-model="city">
            <option value="">请选择城市</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                username:'zhangsan',
                city: '2'
            },
            // methods的作用就是定义事件的处理函数
            methods: {
                
            }
        })
    </script>
</body>
</html>

10、v-model 指令修饰符

10.1 三种修饰符

（1）第一种修饰符
.number 自动将用户的输入值转为数值类型

 <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{n1 + n2}}</span>

（2）第二种修饰符
.trim 自动过滤用户输入的首尾空白字符

<input type="text" v-model.trim="username">

（3）第三种修饰符
.lazy 在"change"时而非"input"时更新

<input type="text" v-model.lazy="username">

10.2 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{n1 + n2}}</span>
        <hr>
        <input type="text" v-model.trim="username">
        <button @click="showName">获取用户名</button>
        <hr>
        <input type="text" v-model.lazy="username">
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                username: "lisi",
                n1: 1,
                n2: 2
            },
            // methods的作用就是定义事件的处理函数
            methods: {
                showName(){
                    console.log(`用户名是："${this.username}"`)
                }
            }
        })
    </script>
</body>
</html>

11、条件渲染指令

11.1 介绍

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。

11.2 两种渲染指令

（1）v-if
原理：每次动态创建或移除元素，实现元素的显示和隐藏。
环境：如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好。

<p v-if="flag">这是被v-if控制的元素</p>

（2）v-show
原理：每次动态为元素添加或移除display : none样式，来实现元素的显示和隐藏。
环境：如果要频繁地切换元素的显示状态，用v-show性能会更好。

<p v-show="flag">这是被v-show控制的元素</p>

11.3 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-if="flag">这是被v-if控制的元素</p>
        <p v-show="flag">这是被v-show控制的元素</p>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                // 如果 flag 为true,则显示被控制的元素，如果为false则隐藏被控制的元素
                flag: true
            },
            // methods的作用就是定义事件的处理函数
            methods: {
               
            }
        })
    </script>
</body>
</html>

11.4 注意

在实际开发中，绝大多数情况，不用考虑性能问题，直接用v-if就好了。

12、v-if 配套指令

12.1 v-else

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>

12.2 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-if="type === 'A'">优秀</div>
        <div v-else-if="type === 'B'">良好</div>
        <div v-else-if="type === 'C'">一般</div>
        <div v-else>差</div>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                // 如果 flag 为true,则显示被控制的元素，如果为false则隐藏被控制的元素
                flag: true,
                type: 'A'
            },
            // methods的作用就是定义事件的处理函数
            methods: {
               
            }
        })
    </script>
</body>
</html>

13、列表渲染指令

13.1 介绍

vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for指令需要使用item in items形式的特殊语法。
其中
items是待循环的数组
item是被循环的每一项

13.2 v-for中的索引

v-for指令支持一个可选的第二个参数，即当前项的索引。语法格式为(item, index) in items
注意：v-for指令中的item项和Index索引都是形参，可以根据需要进行重命名。

13.3 示例代码

<tr v-for="(item,index) in list" :key="item.id" :title="item.name + index">
    <td>{{index}}</td>
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
</tr>

13.4 使用key值得注意事项

（1）key的值只能是字符串或数字类型
（2）key的值必须具有唯一性（key的值不能重复）
（3）建议把数据项id属性的值作为key的值（因为id属性的值具有唯一性）
（4）使用Index的值当做key的值没有任何意义（因为index的值不具有唯一性）
（5）建议使用v-for指令时一定要指定key的值（既提升性能，又防止列表状态紊乱）

13.5 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
    <div id="app">
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>索引</th>
                <th>ID</th>
                <th>姓名</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="item.id" :title="item.name + index">
                    <td>{{index}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
                list:[
                    {id:1,name:'张三'},
                    {id:2,name:'李四'},
                    {id:3,name:'王五'}
                ]
            },
            // methods的作用就是定义事件的处理函数
            methods: {
               
            }
        })
    </script>
</body>
</html>