VUEDay03

1.列表渲染

v-for :key

可遍历数据类型:

  <ul>
            <!-- 遍历数组 -->
            <li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}</li>
        </ul>
        <ul>
            <!-- 遍历对象 -->
            <li v-for="(value,key) in cars" :key="key">{{value}}-{{key}}</li>
        </ul>
        <ul>
            <!-- 遍历字符串 -->
            <li v-for="(a,b) in 'str'" :key="key">{{a}}-{{b}}</li>
        </ul>
        <ul>
            <!-- 遍历制定次数 -->
            <li v-for="(value,key) in 5" :key="key">{{value}}-{{key}}</li>
   </ul>

6.2 key

key是虚拟对象的标识,当数据发生变化,Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM和旧虚拟DOM的差异比较(Diff算法)使diff算法效率高

列表过滤

'你好12345' 里面包含空字符串

4.绑定样式

1.绑定class样式

1.字符串写法.适用于:样式的类名不确定,需要动态指定.

2.数组写法.适用于:绑定的样式个数不确定,名字也不确定

3.对象写法:适用于:要绑定的样式个数名字确定.但要动态决定用不用

2.绑定style样式

1.对象写法

2.数组写法

5.条件渲染

显示隐藏

v-show:fasle 隐藏 display:none

v-if:false 整个节点删除

判断

v-if v-else-if v-else(不需要写条件)

书写:顺序要正确,不能被打断

避免结构被破坏:template标签,页面渲染时会将其忽视,只能配合v-if,不能和v-show一起使用

8.Vue.set()的使用

tips:undefined不会展示在页面上

data-->vm_data-->vm.数据名

Vue.set(target,key,val)

类似的:vm.$set(target,key,val)

不能直接给data上添加响应式的数据

!!!!!!!!(对象不能是vue示例,也不能是vue的根数据对象)

**9.Vue如何检测数据改变_数组调用数组一些方法Vue才承认修改

push()

pop()

shift()

unshift()

reverse()

sort()

splice()

通过了包装Vue检测到的修改,此处的push等已被Vue包装过,所以不是原本的了,Vue可以检测到调用

2.过滤器

filter:{

​ fitername(){

​

​ }

}

{{time | fitername}}