04 条件渲染与列表渲染

最新推荐文章于 2023-09-01 11:28:55 发布

_wayliu

最新推荐文章于 2023-09-01 11:28:55 发布

阅读量257

点赞数

分类专栏： Vue开发实战

本文链接：https://blog.csdn.net/weixin_44499465/article/details/114670495

版权

Vue开发实战专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.条件渲染

2.列表渲染

1.条件渲染

v-if
v-else
v-show

这里只需要注意v-if与v-show的区别：

v-if 是”真正“的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show不管真假元素都会渲染，并且只是简单地基于css进行切换。当为假是相当于display: none。

2.列表渲染

2-1 遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
</head>
<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 src="https://cdn.jsdelivr.net/npm/vue"></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>
</html>

在这里插入图片描述
语法总结：

v-for=‘item in fruits’，item即fruits的引用。
v-for=’(item, index) in fruits’，item是fruits的引用，index是数组的下标。

2-2 遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        obj: {
          uname: 'zhangsan',
          age: 13,
          gender: 'female'
        }
      }
    });
  </script>
</body>
</html>