1,计算属性 computed
computed 计算属性 :通过原本属性进行计算 产生一个新的属性
计算属性 不写在data里面 写在computed中
重点:它是由原本的属性(data中的数据)产生的新的属性
下方是部分代码演示:(自行引入vue)
<body>
<div id="app">
<p>
姓:<input type="text" v-model="firstName">
</p>
<p>
名字:<input type="text" v-model="lsatName">
</p>
{
{allName}}
</div>
<script>
//通过 firstName和lastName计算一个新的属性
//当firstName或者lastName实时更新
//computed 计算属性 :通过原本属性进行计算 产生一个新的属性******
// 计算属性 不写在data里面 写在computed中
let vm=new Vue({
el:"#app",
data:{
firstName:"",
lsatName:""
},
computed:{
allName(){
return this.firstName+this.lsatName
}
}
})
</script>
</body>
2,watch 监听
watch 不产生新的属性,只是在原有的内容进行更改 ,通过监听某个数据的变化改变其他数据,实现复杂操作——
watch 用于复杂逻辑 ,搜索!! input框 值发送变化时,AJax请求 ,当数据变化 实现功能较为复杂时,使用watch,watch不是只对属性服务,可以写多种操作
<body>
<div id="app">
<p>
当前温度:<button @click="reduce()">-</button>{
{temperature}} <button @click="add()">+</button>
</p>
<p>
建议穿衣指数:{
{dress}}
</p>
</div>
<script>
// watch选项:监听选项 对vue中某一个数据进行监听,当数据发生变化时,执行对应函数
// 20以上 短袖
//10-20 长袖
//0-10 外套
//0 棉衣
let vm=new Vue({
el:"#app",
data:{
temperature:20,
dress:"半袖"
},
methods: {
reduce(){
this.temperature--
},
add(){
this.temperature++
}
},
watch:{
temperature(){
console.log(1)
if(this.temperature<20){
this.dress="长袖"
}
}
}
})
</script>
</body>
通过监听温度的变化 ,自动改变穿衣指数,监听的是温度,而改变的是穿衣指数,也可以同时改变多个属性 ,可听一变则万变
当然了这个逻辑简单用computed也可以做
扫描二维码关注公众号,回复:
16008358 查看本文章
watch和计算属性区别:
1.watch 不产生新的属性,只是在原有的内容进行更改
computed 利用原本属性,产生一个新的属性
2. computed 用于基于原有数据,可以直接计算出来的内容 ,计算属性中通常写的都是简单的逻辑 一些基本的计算和对应的判定
watch 用于复杂逻辑 ,搜索!! input框 值发送变化时,AJax请求 ,当数据变化 实现功能较为复杂时,使用watch,watch不是只对属性服务,可以写多种操作
是不是一眼就看懂了,别急着走,点个赞吧!