(7)打鸡儿教你Vue.js
2023-09-11 14:16:52 时间
计算属性
computed
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
计算属性的实例:
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'dashu!'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
computer 属性“依赖缓存”的概念
method 的概念
有缓存,不会发生改变,于是界面渲染就直接用这个值,不再重复执行代码
没有缓存,只要用一次,函数代码就执行一次
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
相关文章
- vue中v-if和v-show的区别
- [Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS
- vue.js3:用exif-js读取图片的exif信息(vue@3.2.36)
- vue.js3.x 使用vue3-count-to 组件(到可视区域才start数字滚动 vue@3.2.33 / vue3-count-to@1.1.2)
- vue.js 3.2.22:自动旋转的音乐播放按钮
- vue中8种组件通信方式, 值得收藏!
- [Vue] Create Vue.js Layout and Navigation with Nuxt.js
- vue.js3: 用crypto-js做sha加密(vue@3.2.37 / crypto-js@4.1.1)
- vue.js 3.2.22:自动旋转的音乐播放按钮
- vue.js 3.2.20: 用photoswipe实现图片的浏览:增加切换动画和自动播放(photoswipe@4.1.3)
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- Vue入门教程:node安装vue命令行工具及启动项目
- html使用vue模板、html引入vue.js-测试demo
- 计算机毕设 SSM Vue的家庭食谱管理系统(含源码+论文)
- 计算机毕设 SSM Vue大学生社团管理系统(含源码+论文)
- 如何在Vue组件中调用封装好的外部js文件方法
- react useMemo、useEffect和 useCallback区别及与 vue 对比
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
- vue的iview列表table render函数设置DOM属性值的方法
- 177:vue+openlayers 加载多种形式Esri地图
- 093:vue+openlayers设置zoom最大值和最小值 (示例代码)
- 【JS高级】js之函数、重载、匿名函数、作用域及作用域链_03
- 【三十天精通 Vue 3】 第十天 Vue 状态管理详解
- vue 文件目录结构详解
- Vue学习笔记——vue-router
- Vue - 使用mui的 tab-top-webview-main 完成分类滑动栏