前端之vue条件渲染、列表渲染

一只爱吃萝卜的小兔子

已于 2022-04-25 14:26:53 修改

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端

于 2022-04-25 14:24:15 首次发布

本文链接：https://blog.csdn.net/weixin_46372074/article/details/124404316

版权

vue 专栏收录该内容

51 篇文章 3 订阅

订阅专栏

vue条件渲染、列表渲染

条件渲染
列表渲染
列表过滤
列表排序

条件渲染

v-if 值为false，v-if在的标签直接在HTML文档中删除；
v-show值为false，v-show在的标签display的值为none。

v-if=“表达式”    //

表达式就是会返回一个值，此处要能转换为Boolean值。

template标签最大的好处是不影响文档的结构，渲染时会将template标签去掉
template只能和v-if配合使用

<body>
  <div id="root">
    <div>欢迎来到{{name}}</div>
    <div>
      <h2>编号:{{num}}</h2>
      <button @click="num++">点我加一</button>
    </div>
    <hr />
    <div>
      <h2>v-show</h2>
      <h2 v-show="num === 1">html</h2>
      <h2 v-show="num === 2">css</h2>
      <h2 v-show="num === 3">js</h2>
      <h2 v-show="num === 4">vue</h2>
      <h2 v-show="num === 5">nodejs</h2>
    </div>
    <hr />
    <div>
      <h2>v-if</h2>
      <h2 v-if="num === 1">html</h2>
      <h2 v-else-if="num === 2">css</h2>
      <h2 v-else-if="num === 3">js</h2>
      <h2 v-else-if="num === 4">vue</h2>
      <h2 v-else-if="num === 5">nodejs</h2>
      <h2 v-else>暂时截止</h2>
    </div>
  </div>

  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: '#root',
      data() {
        return {
          name: '尚硅谷',
          num: 1,
        }
      },
  </script>
</body>

列表渲染

在这里插入图片描述

v-for遍历数组

  <!-- 容器 -->
  <div id="root">
    <h2>人员列表</h2>
    <ul>
      <li v-for="p in persons" :key="p.id">
        {{p.name}}-{{p.age}}
      </li>
    </ul>
  </div>

    new Vue({
      el: '#root',
      data() {
        return {
          persons: [{
              id: '001',
              name: '张三',
              age: 18
            },
            {
              id: '002',
              name: '李四',
              age: 17
            },
            {
              id: '003',
              name: '钱五',
              age: 16
            },
            {
              id: '004',
              name: '王六',
              age: 19
            },
          ]
        }
      }
    })

上方v-for一个参数，下方v-for两个参数

    <ul>
      <li v-for="(p,index) in persons" :key="index">
        {{p.name}}-{{p.age}}
      </li>
    </ul>

第一个参数用来遍历数组中的元素，
第二个参数是数组中对应的坐标。

key

给结点一个标识，可以相当于人的身份证，:key可以动态绑定数组内容的id

不写key，key默认index

工作原理：
数据→VDOM（虚拟结点含有key）→DOM
数据更新时，新旧虚拟DOM进行对比（diff）。根据相同key对比，内容相同，复用；内容不同，生成新的结点。
在这里插入图片描述

key的选择

在这里插入图片描述

v-for遍历对象

    <h2>汽车信息</h2>
    <ul>
      <li v-for="(value,index) in cars" :key="index">
        {{index}}:{{value}}
      </li>
    </ul>

 cars: {
            name: '奥迪',
            price: '70万',
            color: '黑色'
          }

index是指属性名，
value是对应的属性值。
若只用一个行参那么只遍历属性值。

遍历字符串

    <h2>遍历字符串</h2>
    <ul>
      <li v-for="(value,index) in str" :key="index">
        {{index}}:{{value}}
      </li>
    </ul>

data(){
  str: 'abcdefg',
}

遍历指定次数

    <h2>遍历指定次数</h2>
    <ul>
      <li v-for="(value,index) in 6" :key="index">
        {{index}}:{{value}}
      </li>
    </ul>

在这里插入图片描述

列表过滤

模糊搜索 – computed /watch
但是能用computed实现的用computed

1.拿到用户输入：v-model，keyWord
2.在computed中, 以原数组为数据范围, 使用filter逐项筛选姓名中是否含有对应的字(indexOf)

  <!-- 容器 -->
  <div id="root">
    <h2>人员列表</h2>
    <input type="text" v-model="keyWord" placeholder="请输入名字">
    <ul>
      <li v-for="(p,index) in filterPersons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
      </li>
    </ul>
  </div>

new Vue({
  el: '#root',
  data() {
    return {
      keyWord: '',
      persons: [{
          id: '001',
          name: '马冬梅',
          age: 18,
          sex: '女'
        },
        {
          id: '002',
          name: '周冬雨',
          age: 17,
          sex: '女'
        },
        {
          id: '003',
          name: '周杰伦',
          age: 16,
          sex: '男'
        },
        {
          id: '004',
          name: '温兆伦',
          age: 19,
          sex: '男'
        },
      ]
    }
  },
  computed: {
    filterPersons() {
      return this.persons.filter((p) => {
        return p.name.indexOf(this.keyWord) !== -1;
      })
    }
  }
})

列表排序

computed
1.在computed中使用filter过滤数据, 在存入一个数组中
2.得到数组数据后进行排序
3.返回数据

<!--
 * @LastEditors: 一只爱吃萝卜的小兔子
 * @Date: 2022-04-24 16:49:04
 * @LastEditTime: 2022-04-24 17:05:52
 * @FilePath: \vuejs-learn\vue-start\list-sort.html
-->
<!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">

  <!-- 页面标签图标 -->
  <link rel="shortcut icon" href="../favicon.svg">
  <title>列表排序</title>
  <!-- 引入Vue -->
  <script src="../vuejs/vue.js"></script>
</head>

<body>
  <!-- 容器 -->
  <div id="root">
    <h2>人员列表</h2>
    <input type="text" v-model="keyWord" placeholder="请输入名字">
    <button @click="sortType = 1">降序</button>
    <button @click="sortType = 2">升序</button>
    <button @click="sortType = 0">原顺序</button>
    <ul>
      <li v-for="(p,index) in filterPersons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
      </li>
    </ul>
  </div>

  <script>
    Vue.config.productionTip = false; // 阻止 Vue 在启动时生成的生产提示
    new Vue({
      el: '#root',
      data() {
        return {
          sortType: 0,
          keyWord: '',
          persons: [{
              id: '001',
              name: '马冬梅',
              age: 18,
              sex: '女'
            },
            {
              id: '002',
              name: '周冬雨',
              age: 17,
              sex: '女'
            },
            {
              id: '003',
              name: '周杰伦',
              age: 16,
              sex: '男'
            },
            {
              id: '004',
              name: '温兆伦',
              age: 19,
              sex: '男'
            },
          ]
        }
      },
      computed: {
        filterPersons() {
          const arr = this.persons.filter((p) => {
            return p.name.indexOf(this.keyWord) !== -1;
          })

          if (this.sortType) {
            arr.sort((p1, p2) => {
              return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age;
            })
          }
          return arr;
        }

      }
    })
  </script>
</body>

</html>

下一节:前端之vue监测数据改变的原理

一只爱吃萝卜的小兔子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端之vue条件渲染、列表渲染

vue条件渲染、列表渲染条件渲染列表渲染v-for遍历数组keykey的选择v-for遍历对象遍历字符串遍历指定次数列表过滤列表排序条件渲染v-if 值为false，v-if在的标签直接在HTML文档中删除；v-show值为false，v-show在的标签display的值为none。v-if=“表达式” //表达式就是会返回一个值，此处要能转换为Boolean值。template标签最大的好处是不影响文档的结构，渲染时会将template标签去掉template只能和v-if配合使用
复制链接

扫一扫