Class和Style绑定
class绑定
放置对象（常用）
:class="{类名:布尔}"
<!-- 第一种 放置字符串-->
<p class="active">hello</p>
<!-- 第二种 放置对象-->
<!-- <p :class="{类名:布尔}">hello</p> -->
<p :class="{active:true}">hello1</p>
<p :class="{active:isActive,helloWorld:isActive}">hello1</p>
<button @click="isActive=!isActive">改变Active</button>
<!-- 和普通类同时存在不会冲突 -->
<p :class="{active:true}" class="helloWorld">hello1</p>
<p :class="classObj">hello1</p>
使用computed
this.error表示是否渲染出来了
export default{
data(){
return{
message:"helloWorld",
isActive:true,
error:null,
classObj:{
active:true,
helloWorld:true,
}
}
},
computed:{
classObjCom:function(){
return{
active:this.isActive && !this.error,
helloWorld:this.error,
}
}
}
}
<p :class="classObjCom">hellocomputed</p>
传数组（不常用）
data(){
return{
message:"helloWorld",
activeClass:"active",
...
}
},
<!-- 数组语法 -->
<p :class="[activeClass,message]">hello2</p>
<!-- 数组和对象结合 -->
<p :class="[message,{active:isActive}]">hello3</p>
style绑定
<!-- 第一种 放置字符串 -->
<p style="color:red">hello</p>
:style="{ key:value }" 其中key是css属性名，value是属性值来自data
使用驼峰命名法，用font-size 50px要打引号
data(){
return{
activeColor:'red',
fontSize:'50px',
bgcColor:'pink',
styleObj:{
color:'red',
fontSize:'50px',
'background-color':'pink',
}
}
},
<p :style="{color:activeColor,fontSize:fontSize,'background-color':bgcColor}">hello1</p>
<p :style="styleObj">hello1</p>
和class类似经常结合computed使用，参考class即可
使用数组
<p :style="[styleObj,{border:'5px solid blue'}]">hello2</p>
内置指令 v-xxx
一部分已经在上一篇力提到这里只记录常用的
v-if条件渲染使用
<p v-if="age>18">我是个成年人</p>
<p v-else-if="age==18">我今天刚好18</p>
<!-- <p v-if="age<18">我是个小朋友</p> -->
<p v-else>我是个小朋友</p>
template元素上使用条件渲染分组
template是不可见的包裹元素，最终渲染不会显示出来。
最后只有大于18岁的人才看的见，同时网页源码中不会出现template标签
<template v-if="age>=18">
<p>你好</p>
<p>你好</p>
<p>你好</p>
</template>
v-show条件渲染
v-show会始终渲染并保留在DOM中，只是简单的遮蔽（切换元素的display CSS property）。v-show不支持template。
<p v-show="sex=='man'">男生</p>
<p v-show="sex=='woman'">女生</p>
v-if VS v-show
v-if只要条件不满足，对应元素和子元素都不会被渲染，控制dom元素的创建和销毁。
v-show只是隐藏
总结：分场景使用这两者，频繁切换状态使用v-show；一次性的、条件很少改变的使用v-if。
v-for列表渲染
v-for使用数组
export default{
data(){
return{
person:['张三','李四','王五'],
}
},
};
item代表数组中每个元素，index表示下标。:key提供一个排序的提示，in和of同时都可以使用
<ul>
<li v-for="item in person" :key="item">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) in person" :key="index">
{{item}}-->{{index}}
</li>
</ul>
<ul>
<li v-for="(item,index) of person" :key="index">
{{item}}-->{{index}}
</li>
</ul>
v-for使用对象
data(){
return{
person:['张三','李四','王五'],
personObj:{name:"张三",age:18,sex:"男"},
}
},
item代表键值，key表示键名
<ul>
<li v-for="(item,key,index) in personObj" :key="index">
{{item}}-->{{key}}-->{{index}}
</li>
</ul>
维护状态
:key给vue提示排列顺序（跟踪每个节点身份，从而重用和重排现有元素）
export default{
data(){
return{
person:['张三','李四','王五'],
personObj:{name:"张三",age:18,sex:"男"},
}
},
methods:{
addPerson:function(){
this.person.unshift('赵六');//插入到最前
}
}
};
<ul>
<li v-for="item in person">
<input type="checkbox" name="" id="">{{item}}
</li>
</ul>
<button @click="addPerson">增加用户</button>
如果不指定:key，那么将会发生：当我勾选张三后，再点击添加赵六，赵六成了第一个，钩变到赵六身上。
所以需要指定：key作为唯一的标识。快速找到节点，减少渲染次数，提高性能。
正确的写法：
<ul>
<li v-for="item in person" :key="item">
<input type="checkbox" name="" id="">{{item}}
</li>
</ul>
<button @click="addPerson">增加用户</button>
v-for数组更新
触发试图更新vue2和vue3的区别，vue3数组实现了彻底的响应式。
写一个列表，并且准备一个按钮点击更改。
<div>
<ul>
<li v-for="item in list" :key="item">{{item}}</li>
</ul>
<button @click="changeList">改变数组</button>
</div>
export default {
data() {
return {
list: [1, 3, 6, 4, 5],
};
},
methods: {
changeList:function(){
...
},
},
};
Vue3做法
vue3很强大直接下标修改，越界也可
methods: {
changeList:function(){
this.list[5]=7;
},
},
Vue2做法
需要借助js来进行数组更改
push和pop
push();给数组末尾添加元素可以是多个
pop();删除掉数组的最末尾
methods: {
changeList:function(){
this.list.push(7,8,9);
this.list.pop();
},
},
shift和unshift
shift();删除首位
unshift();添加到首位可以是多个
methods: {
changeList:function(){
this.list.shift();
this.list.unshift(0,0,9);
},
},
splice
最为常用，可删除、插入、替换元素。
参数1：表示开始拆入或者开始删除的元素位置下标
参数2：想要传入or删除几个元素
methods: {
changeList:function(){
//删除元素
this.list.splice(1);//删除从[1]往后所有
this.list.splice(1,2);//删除从[1]往后2个
//插入元素
this.list.splice(1,0,9);//参数2为0表示插入
this.list.splice(1,0,9,8,7);//从[1]插入多个
//替换元素
this.list.splice(1,3,9,8,7);//参数2为三表示替换三个元素
},
},
sort和reverse
sort();排序默认从小到大
reverse();翻转
methods: {
changeList:function(){
this.list.sort();
this.list.reverse();
},
},