computed和watch的区别
1.computed能完成的功能watch都可以完成
2.watch能完成的功能 computed不一定能完成 例如 watch可以进行异步(定时器)任务操作
watch:{
fistName(val){
setTimeout(()=>{
this.fullName = val + '-' + this.lastName
},1000)
},
lastName(val){
this.fullName = this.fistName + '-' + val
}
},
两个原则
1.所有被Vue管理的函数，最好写成普通函数 这样this的指向才是vm 或 组件实例对象
2.所有不被Vue管理的函数(定时器的回调函数，ajax的回调函数)最好写成箭头函数
这样this的指向才是vm 或组件实例对象
class style样式绑定
<!-- 绑定class样式---字符串写法 适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
const vm = new Vue({
el:"#root",
data:{ //属性
name:'尚硅谷',
mood:'normal',
classArr:['a','s','p'],
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
<!-- 绑定class样式---数组写法 适用于：要绑定的样式个数不确定 名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div>
const vm = new Vue({
el:"#root",
data:{ //属性
mood:'normal',
classArr:['a','s','p'],
绑定class样式---对象写法 适用于：要绑定的样式确定名字也确定 但 要动态决定要不要
<div class="basic" :class="classObj">{{name}}</div>
const vm = new Vue({
el:"#root",
data:{ //属性
name:'尚硅谷',
mood:'normal',
classObj:{
sss:false,
ttt:false
},
},)
<!-- 绑定style样式- 对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div>
<!-- 绑定style样式- 数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
const vm = new Vue({
el:"#root",
data:{ //属性
name:'尚硅谷',
mood:'normal',
styleObj:{
fontSize: '40px',
color:'red'
}
},
