vue监听器和计算属性,vue侦听属性怎么使用
这篇文章主要介绍了某视频剪辑软件计算属性和侦听器的使用小结，帮助大家更好的理解和使用某视频剪辑软件框架，感兴趣的朋友可以了解下
1. 计算属性和侦听器
1.1 计算属性
！声明文档类型
超文本标记语言
头
meta charset=utf-8
脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本
/头
身体
div id=应用程序
p{{ message }}/p
p{{ reversedMessage }}/p
/div
脚本
新Vue({
埃尔： #app ，
数据：{
消息："你好"
},
计算值：{
reversedMessage: function () {
返回this.message.split( ).反转()。联接("")
}
/*
//相当于
reversedMessage: {
get(){
返回this.message.split( ).反转()。联接("")
}
}
*/
}
});
/脚本
/body
/html
解释：我们在属性计算中定义了计算属性反向消息，这里提供的函数将作为计算属性反向消息的吸气剂函数。
1.2 setter
计算属性默认只有吸气剂，不过我们可以提供一个二传手。
！声明文档类型
超文本标记语言
头
meta charset=utf-8
脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本
/头
身体
div id=应用程序
p{{ message }}/p
p{{ reversedMessage }}/p
input type= text v-model= reversed message /
/div
脚本
新Vue({
埃尔： #app ，
数据：{
消息："你好"
},
计算值：{
reversedMessage: {
get(){
返回this.message.split( ).反转()。联接("")
},
设置（值){
this.message=value.split( ).反转()。联接("")
}
}
}
});
/脚本
/body
/html
1.3 缓存
！声明文档类型
超文本标记语言
头
meta charset=utf-8
脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本
/头
身体
div id=应用程序
p{{ message }}/p
p{{ reversedMessage }}/p
p{{ reversedMessage1() }}/p
/div
脚本
新Vue({
埃尔： #app ，
数据：{
消息："你好"
},
方法：{
reversedMessage1: function(){
返回this.message.split( ).反转()。联接("")
}
},
计算值：{
reversedMessage: function () {
返回this.message.split( ).反转()。联接("")
}
}
});
/脚本
/body
/html
注意：虽然通过计算属性和方法，都可以达到同样的效果，但是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
1.4 侦听属性
通过某视频剪辑软件实例的看属性可以侦听数据的变化。
！声明文档类型
超文本标记语言
头
meta charset=utf-8
脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本
/头
身体
div id=应用程序
p{{ message }}/p
button @click=reverse=！"反向"反转/按钮
/div
脚本
新Vue({
埃尔： #app ，
数据：{
消息：“Vue”，
反向：错误
},
观察：{
//message: function(newVal，oldVal){
反向：函数（新值){
console.log(newVal)
这个。消息=这个。消息。拆分(“”).反转()。联接("")
}
},
});
/脚本
/body
/html
我们可以通过实例属性虚拟机.$手表达到同样的效果。
！声明文档类型
超文本标记语言
头
meta charset=utf-8
脚本src= https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js /脚本
/头
身体
div id=应用程序
p{{ message }}/p
button @click=reverse=！"反向"反转/按钮
/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
消息：“Vue”，
反向：错误
}
});
//vm .$watch(reverse ，function (newVal，oldVal) {
虚拟机.$watch(reverse ，function (newVal) {
console.log(newVal)
这个。消息=这个。消息。拆分(“”).反转()。联接("")
});
/脚本
/body
/html
以上就是某视频剪辑软件计算属性和侦听器的使用小结的详细内容，更多关于某视频剪辑软件计算属性和侦听器的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。