vue06 基础-列表渲染

Posted 2023-04-13

参考技术A 我们可以用 v-for 指令基于一个数组来渲染一个列表。

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。

可以用 v-for 来遍历一个对象的属性。

你也可以提供第二个的参数为 property 名称 (也就是键名)：

结果

  在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 javascript 引擎下都一致。
补充:
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组 。使用方式 =>Object.keys(obj)

使用变异方法也会更新视图
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

变异数组会改变原始数组。而替换数组不会改变原始数组，总是返回一个新数组。例如 filter()、concat() 和 slice()。它们不会改变原始数组，而总是返回一个新数组。

Vue 不能检测数组和对象的变化，解决方法
https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

可以创建一个计算属性，来返回过滤或排序后的数组。

但是不是所有情况都适用，比如在多重v-for循环中。那么就要使用methods。

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

结果：

Vue学习计划(基础三)-class与style绑定,条件渲染和列表渲染

Class与style绑定、条件渲染和列表渲染

目标：

1. 熟练使用class与style绑定的多种方式
2. 熟悉v-if与v-for的用法，以及v-if和v-for一起使用的注意事项

class与style绑定的多种方式

1. 绑定class和style都是使用v-bind也就是:
2. 无论是绑定class还是style,都有两种方式,一种是对象,一种是数组.
3. class和:class是共存的

绑定示例

1.class对象绑定

    <!-- 根据isActivity的真假,判断是否应用activity这个class -->
    <div :class="{activity:isActivity}"></div>   

2.class数组绑定

    <!-- 应用数组里面的class -->
    <div :class="[activity, activityOne]"></div>  

3.style对象绑定

    <!-- 应用这个样式对象的样式 -->
    <div :style="styleObj"></div>  
    
    <script>
    ...
    //styleObj写在data里面
    data() {
        return {
            styleObj: {
                color: ‘black‘
            }
        }
    }
    ...
    </script>

4.style数组绑定

    <!-- 应用这个数组里面的样式 -->
    <div :style="[styleObj,{fontSize:‘25px‘}]"></div>  

v-if与v-for的用法

条件渲染

1.v-if="表达式", 表达式的真假值决定了是否挂载到页面上

     <div v-if="isTrue">这一段会在html里面,而且会显示出来</div>
     <div v-if="isFalse">这段不会在html里面,也不会显示出来</div>

2.v-show="表达式", 表达式的真假值决定了该节点的display属性是none / block

     <div v-show="isTrue">display: block,会显示出来</div>
     <div v-show="isFalse">display: none,不会显示出来</div>

3.区别: 功能都是一样,实现节点是否显示出来,但是v-if会操作dom,会重新渲染页面

4.v-if的话,还有v-if-else和v-else这两个命令, 不过要连着一起用,中间不能有其他东西隔开,使用规则和js的if..else语句一样

列表渲染

1.v-for of

     <li v-for="item of list">{{item}}</li>   //其中list为数组,item为数组元素
     <li v-for="(item,index) of list">{{index}}{{item}}</li>  //其中list为数组,index为索引(第一个0开始),item为数组元素

2.循环渲染对象

     //其中userInfo为对象, item为值, key为键, index为索引
     <li v-for="(item, key, index) of userInfo">{{item}}{{key}}{{index}}</li>

3.一般会加个key值,避免互相影响(语法检测会检测这个,添加key值之后就会互相区分独立,相同部分也会重新渲染,不会复用)

     <li v-for="(item, index) of list" :key="index"></li>
   或<li v-for="(item, index) of list" :key="item.id"></li>

4.key和index是可选的

v-if和v-for一起使用的注意事项

1.v-for的优先级比v-if更高, 如果它们处于同一个节点,这样v-if将分别重复运行于每个v-for循环中.
也就是, 先执行v-for,v-for出来的每一项都会执行一次v-if.

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

2.如果想先执行v-if再判断是否执行v-for, 可以将v-if置于外层元素(或template)上.

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>