Vue02

Vue02

绑定class样式

• 字符串写法，适用于：样式的类名不确定，需要动态指定

• 数组写法，适用于：要绑定的样式个数不确定，名字也不确定

• 对象写法，适用于：要绑定的样式个数缺点，名字也确定，但是要动态决定用不用

  …

  //方式一

绑定style样式

{{name}}


new Vue({

    ....

    styleObj:{
        fontSize:"40px",
        color:"red",
        backgroundColor:'orange'
    }
})

条件渲染

• v-if

  • 写法

  • v-if=“表达式”

  • v-else-if=“表达式”

  • v-else=“表达式”

  • 适用于：切换频率低的场景

  • 特点：不展示的DOM元素直接被移除

  • 注意：v-if可以和v-else-if,v-else 一起使用，但要求结构不能被打断

• v-show

  • 写法：v-show=“表达式”

  • 适用于：切换频率较高的场景

  • 特点：不展示的DOM元素未被移除，仅仅使用样式隐藏掉

• 注：使用v-if时，元素可能无法被获取到，而使用v-show一定可以获取到

注：template标签不会破坏DOM结构

    n值加1
    {{n}}
    

列表渲染

• 遍历数组

• 遍历对象

• v-for 指令

  • 用于展示列表数据

  • 语法：v-for=“(item,index) in xxx” :key=“yy”

  • 可遍历：数组，对象，字符串（少），指定次数（少）

注：对象时，前面一个参数是val，后面的key

记忆：key也是一种另外的索引

理解key这个属性

Vue中key有什么作用

1. 虚拟DOM中key的作用

2. key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较

3. 比较规则

4. 旧虚拟DOM中找到与新虚拟DOM相同的key

1. 若虚拟DOM中内容没有改变，直接用之前的真实DOM
  
2. 若改变了，则生成新的真实DOM，随后替换掉页面之前的真实DOM

2. 没有找到相同的key

1. 创建新的真实DOM，随后渲染到页面

3. 用index作为key可能会引发的问题

4. 若对数据进行：逆序添加，逆序删除等破坏顺序操作

1. 会产生没有必要的真实DOM更新 ==>界面没有问题，但效率低

2. 如果结构中还包含输入类的DOM

1. 会产生错误的DOM更新==>界面有问题

在开发中如何选择key

1. 最好使用每条数据的唯一标识作为key，比如id,手机号，身份证号，学号等唯一值

2. 如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

   • {{person.name}} - {{person.gender}}

列表过滤

• 数据监视实现

• 计算属性实现

        
  
            
            
  
                
  
                    {{person.name}} - {{person.gender}}
                
            
            添加人员
  
        
        
    
  

列表排序

	
	

		

			{{person.name}} - {{person.gender}} - {{person.age}}
		
	
	添加人员


	年龄升序
	年龄降序
	  原顺序




....



computed:{
	serchPerson(){
		const arr = this.personList.filter((p)=>{
			return p.name.indexOf(this.name_word) !== -1
		})
		if(this.type){
			arr.sort((p1,p2) =>{
					return this.type === 1 ? p1.age - p2.age : p2.age - p1.age
			})
		}
		return arr
	}
},