Vue.js 指令v-for和v-if和v-show

r囧r小猫 2022-03-18 07:14 262阅读 0赞

### 文章目录 ###

*   *  Vue指令之\`v-for\`和\`key\`属性
     *   *  代码演示
         *   *  v-for循环普通数组
             *  v-for循环对象数组
             *  v-for循环对象
             *  v-for迭代数字
             *  v-for循环中key属性的使用
     *  Vue指令之\`v-if\`和\`v-show\`
     *  品牌管理案例
     *   *  代码演示
         *   *  根据条件筛选品牌 根据条件筛选品牌

## Vue指令之`v-for`和`key`属性 ##

1.  迭代数组

1.  迭代对象中的属性

<div v-for="(val, key, i) in userInfo">{
       {val}} --- {
       {key}} --- {
       {i}}</div>

1.  迭代数字

> 2.2.0+ 的版本里，**当在组件中使用** v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**， 而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，你需要为每项提供一个唯一 key 属性。

### 代码演示 ###

#### v-for循环普通数组 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]

#### v-for循环对象数组 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]

#### v-for循环对象 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]

#### v-for迭代数字 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 3]

#### v-for循环中key属性的使用 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 4]

## Vue指令之`v-if`和`v-show` ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 5]

> 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

## 品牌管理案例 ##

功能：

1.  添加新品牌
2.  删除品牌删除品牌
3.  根据条件筛选品牌 根据条件筛选品牌

### 代码演示 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
      
    </head>
    
    <body>
      <div id="app">
    
    
    
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
          </div>
          <div class="panel-body form-inline">
            <label>
              Id:
              <input type="text" class="form-control" v-model="id">
            </label>
    
            <label>
              Name:
              <input type="text" class="form-control" v-model="name">
            </label>
    
            
            <input type="button" value="添加" class="btn btn-primary" @click="add()">
    
            <label>
              搜索名称关键字：
              <input type="text" class="form-control" v-model="keywords">
            </label>
          </div>
        </div>
    
    
    
        <table class="table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Ctime</th>
              <th>Operation</th>
            </tr>
          </thead>
          <tbody>
            
            
            
            <tr v-for="item in search(keywords)" :key="item.id">
              <td>{
       { item.id }}</td>
              <td v-text="item.name"></td>
              <td>{
       { item.ctime }}</td>
              <td>
                <a href="" @click.prevent="del(item.id)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
    
    
    
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            id: '',
            name: '',
            keywords: '', // 搜索的关键字
            list: [
              { id: 1, name: '奔驰', ctime: new Date() },
              { id: 2, name: '宝马', ctime: new Date() }
            ]
          },
          methods: {
            add() { // 添加的方法
              // console.log('ok')
              // 分析：
              // 1. 获取到 id 和 name ,直接从 data 上面获取 
              // 2. 组织出一个对象
              // 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中
              // 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；
    
              // 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作；
    
              var car = { id: this.id, name: this.name, ctime: new Date() }
              this.list.push(car)
              this.id = this.name = ''
            },
            del(id) { // 根据Id删除数据
              // 分析：
              // 1. 如何根据Id，找到要删除这一项的索引
              // 2. 如果找到索引了，直接调用 数组的 splice 方法
    
              /* this.list.some((item, i) => {
                if (item.id == id) {
                  this.list.splice(i, 1)
                  // 在 数组的 some 方法中，如果 return true，就会立即终止这个数组的后续循环
                  return true;
                }
              }) */
    
    
              var index = this.list.findIndex(item => {
                if (item.id == id) {
                  return true;
                }
              })
    
              // console.log(index)
              this.list.splice(index, 1)
            },
            search(keywords) { // 根据关键字，进行数据的搜索
              /* var newList = []
              this.list.forEach(item => {
                if (item.name.indexOf(keywords) != -1) {
                  newList.push(item)
                }
              })
              return newList */
    
              // 注意：  forEach   some   filter   findIndex   这些都属于数组的新方法，
              //  都会对数组中的每一项，进行遍历，执行相关的操作；
              return this.list.filter(item => {
                // if(item.name.indexOf(keywords) != -1)
    
                // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')
                //  如果包含，则返回 true ，否则返回 false
                //  contain
                if (item.name.includes(keywords)) {
                  return item
                }
              })
    
              // return newList
            }
          }
        });
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 6]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 7]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 8]

#### 根据条件筛选品牌 根据条件筛选品牌 ####

1.  1.x 版本中的filterBy指令，在2.x中已经被废除：

[filterBy - 指令][filterBy -]

<tr v-for="item in list | filterBy searchName in 'name'">
    
      <td>{
       {item.id}}</td>
    
      <td>{
       {item.name}}</td>
    
      <td>{
       {item.ctime}}</td>
    
      <td>
    
        <a href="#" @click.prevent="del(item.id)">删除</a>
    
      </td>
    
    </tr>

1.  在2.x版本中[手动实现筛选的方式][Link 1]：

*  筛选框绑定到 VM 实例中的 `searchName` 属性：

<hr> 输入筛选名称：
    
    <input type="text" v-model="searchName">

*  在使用 `v-for` 指令循环每一行数据的时候，不再直接 `item in list`，而是 `in` 一个 过滤的methods 方法，同时，把过滤条件`searchName`传递进去：

<tbody>
    
          <tr v-for="item in search(searchName)">
    
            <td>{
       {item.id}}</td>
    
            <td>{
       {item.name}}</td>
    
            <td>{
       {item.ctime}}</td>
    
            <td>
    
              <a href="#" @click.prevent="del(item.id)">删除</a>
    
            </td>
    
          </tr>
    
        </tbody>

*  `search` 过滤方法中，使用 数组的 `filter` 方法进行过滤：

search(name) {
    
      return this.list.filter(x => {
    
        return x.name.indexOf(name) != -1;
    
      });
    
    }

源代码链接：[查看][Link 2]  
学习视频链接：[查看][Link 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]: /images/20220318/6615c8c16f384fa0965506bfa4bc29e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]: /images/20220318/d71dfa965b634214ba89d6e5bfa76ef2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]: /images/20220318/fffa4167d0b94775b28909c57e1f2025.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 3]: /images/20220318/221b302ba6f64df6a9b9dea2545c5ced.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 4]: /images/20220318/560a7c1724ba494fa0bba835b3f39098.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 5]: /images/20220318/5afb80acec74493a8dbcc79798ba5bc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 6]: /images/20220318/a997913e7a3a450cb0722c7ea48c8a2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 7]: /images/20220318/4035125d935e4f5c8a38aa99cfb60b2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 8]: /images/20220318/ffa856ec4f554603982e0b0d896b1e0c.png
[filterBy -]: https://v1-cn.vuejs.org/api/#filterBy
[Link 1]: https://cn.vuejs.org/v2/guide/list.html#%E6%98%BE%E7%A4%BA%E8%BF%87%E6%BB%A4-%E6%8E%92%E5%BA%8F%E7%BB%93%E6%9E%9C
[Link 2]: https://gitee.com/cckevincyh/VueDemo/tree/master/day02
[Link 3]: https://www.bilibili.com/video/av36650577/?p=17