-
- 小橘多多 2024-06-27
vue中的计算属性和侦听器
<input v-model="firstName"/>
<input v-model="lastName"/>两个双向数据绑定输入框
<div>{{fullName}}</div>输出文本 fullName是一个计算属性
fullName变量是通过firstName和lastName计算而成的变量
计算属性在vue实例配置对象里面写入computed对象
在里面定义fullName：function(){} 对应的函数 返回 return this.firstName+' ' +this.lastName这个数据
好处：firstName和lastName这两个值没变化的时候，fullName会继续采用之前的缓存值，至于当firstName和lastName其中一个值变化的时候fullName才会重新进行计算。
侦听器
data内定义一个变量count：0（默认值）
当上述文本任一变化时，计算属性重新计算后，count值会+1
在vue实例内定义一个侦听器watch
首先，监听firstName的变化：若firstName发生改变，那么this.count ++ count的值+1
同时，监听lastName的变化：若lastName发生改变，那么this.count ++ count的值+1
更简便的监听方法是直接监听fullName
- 0赞 · 0采集
-
- 柚子哟 2024-06-05
侦听器指的是 监控某个数据/计算属性是否发生变化 一旦发生变化 就可以在侦听器里面写一些业务逻辑。
computed 计算属性
一个属性由另一个属性计算而来 如果fistName和lastName都没改变 会利用缓存值。
只有其中一个发生改变 才会重新计算 然后改变。
- 0赞 · 0采集
-
- 熊手拉猫手 2024-06-04
计算属性{{xx}}
computed: {
xx : function() {
return this.x1 + ' ' + this.x2
}
}
-----------------------------------
侦听器 x1的值改变时触发
watch: {
x1: function(){
this.count++
}
}
- 0赞 · 0采集
-
- 慕尼黑3503962 2023-06-14
- my hvr. v
61 - 0赞 · 0采集
-
- AppMan 2023-03-06
watch 监听器，表示监听某属性数据发生变化时触发
或者监听计算属性的变化，如全名 fullName
- 0赞 · 0采集
-
- AppMan 2023-03-06
computed 计算属性，表示通过别的属性计算出来的。
当被计算的属性没有改变时，则会使用computed的缓存值。
- 0赞 · 0采集
-
- 月朦胧 2023-02-22
计算属性：
computed:
侦听器：
watch:
- 0赞 · 0采集
-
- 披星戴月的想你 2022-12-01
1、计算属性：当某一个变量需要通过其他变量计算而来时，可将该变量定义在计算属性中，方法：
在vue实例下的computed属性中以方法的形式定义该变量；
2、使用计算属性的优点：当计算属性所依赖的其他变量未发生改变时，计算属性不会重新计算，会使用之前计算的缓存结果，这样可以提高程序运行效率；
3、侦听器：可监控某个变量的变化，从而进行进行业务逻辑处理； 在vue实例下的watch属性中以方法的形式对某个变量进行监听，处理；
例：
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data:{
firstName:"",
lastName:"",
count:0
},
computed:{
fullName: function(){
return this.firstName +" "+ this.lastName
}
},
watch:{
fullName: function(){
this.count++
}
}
})
</script>
- 0赞 · 0采集
-
- 沙澧情缘 2022-11-26
计算属性
- 0赞 · 0采集
-
- 萌宝雨儿 2022-08-01
侦听器，侦听某一个属性所发生变化，发生变化则在侦听器里所改变属性
- 0赞 · 0采集
-
- KwanLueng 2022-07-17
计算属性 computed 是一些数据里没有的属性
侦听器 watch 当数据发生变化时，开始被侦听
- 0赞 · 0采集
-
- Heracles 2022-05-20
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName+ '' + this.lastName
}
},
watch:{
fullName:function(){
this.count ++
}
}
})
</script>
- 0赞 · 0采集
-
- Mr丨大西瓜 2022-05-11
computed：只有在计算属性所依赖的值发生改变时，才会重新计算；如果所依赖的值未发生改变，它会根据之前缓存的计算结果在页面上显示，计算属性定义的函数需要又return值作为计算属性的新的结果
watch：侦听器，侦听某个data中的属性值或者计算属性值，当他们发生改变之后，就会执行定义好的业务函数
- 0赞 · 0采集
-
- 慕村4134595 2022-04-28
计算属性：computed
侦听器：watch 用的count计算，开始为0，计算firstname和lastname合计的fullname，每次在input输入框每进行一次输入，count+1.
- 0赞 · 0采集
-
- 慕村4134595 2022-04-27
head里面加载vue
<script src="./vue.js"></script>
实例格式：
<script>
new Vue({
el:"#某id",
template: //挂载点格式可写在这
data:{
msg:"hello"
}
})
</script>
挂载点里面：如 <div v-on:click....></div>
v-text="msg" //接收实例里面data的文本，写法一
{{msg}} //接收实例里面data的文本，写法二，插值法
v-on:click="xxx" //点击后执行 可简写成@click="xxx" v-on=@
title="this is hello world" //当鼠标放到div上时，会有提示 this is hello world
进阶用法： v-bind:title="msg" //v-bind 数据绑定 句子意思是title属性和msg这个数据项绑定 “”里面其实是一个js表达式，意味着可以在里面添加js的内容 可简写成：title="msg" v-bind=:
v-model //数据的双向绑定 如 <input v-model="msg"/> 这样在页面文本框中修改框内的值，实例data里面的数据项msg的值也会跟着改变
实例里面：
methods:{
xxx:function(){
alert("") //点击后显示
this.msg = "" //点击后改变msg的值，也就完成了点击后改变文字的效果
}
}
- 0赞 · 0采集
-
- 慕工程0499250 2022-04-11
computed:{
fullname : funtion(){
return ;
}
}
侦听器
watch:
- 0赞 · 0采集
-
- 沙澧情缘 2021-11-06
计算属性 computed :{ }
侦听器 watch:{ }
- 0赞 · 0采集
-
- qq_慕慕9196823 2021-10-10
- vew实例中的computed属性，用来做几个数据需要将几个数据进行计算。只有在其所依赖的值发生改变之后才会自动执行。可以很大地提高性能
例如页面显示的fullName
watch属性，用来监听数据变化，当数据发生变化时，做相应的业务逻辑
例如 监听页面firstName和lastName的变化
- 0赞 · 0采集
-
- weixin_慕数据8594880 2021-10-05
computed:叫做计算属性，当在页面上双向绑定数据后，希望可以一个数据把多个数据表示出来可以选择使用computed，它里面存放的是一个方法，也就是一个函数对象。 computed有一个特点，他在每一次改变数据时都会计算出新的值进行显示，如果没有改变，则默认显示上一次的缓存值。
- 0赞 · 0采集
-
- 穆宁 2021-09-13
computed:叫做计算属性，当在页面上双向绑定数据后，希望可以一个数据把多个数据表示出来可以选择使用computed，它里面存放的是一个方法，也就是一个函数对象。 computed有一个特点，他在每一次改变数据时都会计算出新的值进行显示，如果没有改变，则默认显示上一次的缓存值。
- 0赞 · 0采集
-
- 木林森丿 2021-08-26
计算属性computed：在Vue实例里面的computed属性内，用属性名：一个函数来实现两个属性的计算，【注意两个属性是this.属性名，并用return返回。另外这样的数据返回显示不会重新计算，除非this.属性的值改变了】
侦听器watch： 在Vue实例里面的watch属性里，用被监听属性名：一个函数，在函数内用this.属性名，进行操作达到侦听目的。
- 0赞 · 0采集
-
- xflyhack 2021-08-20
compted :计算（一个属性通过其他属性计算出来的）计算性能比较高 依赖的数据没有变化时候 使用缓存 如果变化了会使用变化的；
侦听器：计算输入的字符个数
或者针对fullname进行监听也是可以的；
- 0赞 · 0采集
-
- zrey 2021-08-13
<div id="root"> 姓:<input v-model="firstName"/> 名:<input v-model="lastName"/> <div>{{fullName}}</div> //计算 <div>{{count}}</div> //侦听改变 </div> <script> new Vue()({ el:"#root", data:{ firstName:'', lastName:'', count:0 }, computed:{ //计算属性 fullName:function(){ return this.firstName + ' ' + this.lastName } }, watch:{ //侦听器 fullName:function(){ this.count ++ } } }) </script>- 0赞 · 0采集
-
- Lulingkun 2021-08-03
computed 计算属性
watch 监听器
- 0赞 · 0采集
-
- weixin_慕用6334942 2021-05-20
计算属性computed：{
属性名：function（）{}
}
一个属性通过其他属性计算而来
侦听器： watch：{} 监听某一个数据或者属性发生变化
- 0赞 · 0采集
-
- 慕圣0027805 2021-04-27
1.计算属性(computed:)：一个属性通过其他属性计算而来
只有它依赖的数据发生变化的时候，它才会重新计算；如果依赖的属性没有发生变化，它会利用以前计算结果的缓存来在页面上做显示
2.侦听器(watch)：指的是监听某一个数字发生了变化，然后就在监听器里面做业务逻辑，
侦听器watch：监测某一个数据或计算属性发生了变化，一旦这个数据发生了变化，就在该侦听器内写入业务逻辑
*注：watch不仅可以监听vue实例的data内属性，而且可以监听计算computed下计算属性的变化
- 0赞 · 0采集
-
- 二条_ 2021-03-22
计算属性：
以下例子中fullname作为一个计算属性。
<div id="root"> 姓：<input v-model="firstName"/> 名：<input v-model="lastName"/> <div>{{fullName}}</div> </div> <script> new Vue({ el:"#root", data:{ firstName:'', lastName:'' }, computed:{//表示一个属性由其他属性计算而来 fullName:function(){ return this.firstName+' '+this.lastName } } }) </script>计算属性的两个数据项没有发生变化时，它不会再次进行计算，会使用上次计算结果的缓存来赋值给计算属性。
侦听器：监听某一个数据或者计算属性，若其发生变化，就可以在侦听器里写业务逻辑。
<div id="root"> 姓：<input v-model="firstName"/> 名：<input v-model="lastName"/> <div>{{fullName}}</div> <div>{{count}}</div> </div> <script> new Vue({ el:"#root", data:{ firstName:'', lastName:'' }, computed:{//表示一个属性由其他属性计算而来 fullName:function(){ return this.firstName+' '+this.lastName } }, watch:{ firstName:function(){ this.count++ }, lastName:function(){ this.count++ } } }) </script>更为简单的写法：直接监听计算属性fullName
<div id="root"> 姓：<input v-model="firstName"/> 名：<input v-model="lastName"/> <div>{{fullName}}</div> <div>{{count}}</div> </div> <script> new Vue({ el:"#root", data:{ firstName:'', lastName:'' }, computed:{//表示一个属性由其他属性计算而来 fullName:function(){ return this.firstName+' '+this.lastName } }, watch:{ fullName:function(){ this.count++ } } }) </script>- 0赞 · 0采集
-
- 均利商旅 2021-01-03
watch 侦听器
-
截图0赞 · 0采集
-
- 均利商旅 2021-01-03
computed
-
截图0赞 · 0采集
-
- 均利商旅 2021-01-03
v-on:click @click 绑定事件
v-bind:title :title 绑定属性
v-text="msg" v-html="msg"
v-model 双向绑定
- 0赞 · 0采集
