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有什么作用
-
虚拟DOM中key的作用
-
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
-
比较规则
-
旧虚拟DOM中找到与新虚拟DOM相同的key
1. 若虚拟DOM中内容没有改变，直接用之前的真实DOM2. 若改变了，则生成新的真实DOM，随后替换掉页面之前的真实DOM
- 没有找到相同的key
1. 创建新的真实DOM，随后渲染到页面
-
用index作为key可能会引发的问题
-
若对数据进行：逆序添加，逆序删除等破坏顺序操作
1. 会产生没有必要的真实DOM更新 ==>界面没有问题，但效率低
- 如果结构中还包含输入类的DOM
1. 会产生错误的DOM更新==>界面有问题
在开发中如何选择key
-
最好使用每条数据的唯一标识作为key，比如id,手机号，身份证号，学号等唯一值
-
如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用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}
},
