Vue02

Vue02

绑定class样式

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

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

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

  …

  //方式一

绑定style样式

<div :style="styleObj">{{name}}</div>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结构

<div id="root5"><button @click="n++">n值加1</button><span>{{n}}</span><template v-if="n===1"><h1>好人</h1><h1>坏人</h1></template>
</div>

列表渲染

• 遍历数组

• 遍历对象

• 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中内容没有改变，直接用之前的真实DOM2. 若改变了，则生成新的真实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}}

列表过滤

• 数据监视实现

• 计算属性实现

        <div id="root"><input type="text" placeholder="请输入要查找的姓名" v-model="name_word"><ul><li v-for="person in serchPerson" :key="person.id"  >{{person.name}} - {{person.gender}}</li></ul><button @click="addPerson">添加人员</button><br></div><script type="text/javascript">Vue.config.productionTip = false;new Vue({el:'#root',data:{personList:[{ name:'好人',id:'1',gender:'男',},{ name:'坏人',id:'2',gender:'男',},{ name:'光头强',id:'3',gender:'男',},],personEnd:[],name_word:'',},methods: {addPerson(){this.personList.unshift({name:'大人',id:'4',gender:'女'})}},computed:{serchPerson(){return this.personList.filter((p)=>{return p.name.indexOf(this.name_word) !== -1})}},    })</script></body>
  

列表排序

<div id="root"><input type="text" placeholder="请输入要查找的姓名" v-model="name_word"><ul><li v-for="person in serchPerson" :key="person.id"  >{{person.name}} - {{person.gender}} - {{person.age}}</li></ul><button @click="addPerson">添加人员</button><br><br><button @click="type = 1">年龄升序</button><button @click="type = 2">年龄降序</button><button @click="type = 0">  原顺序</button>
</div>....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}
},