[Vue] Use Vue.js Component Computed Properties
2023-09-14 09:00:52 时间
You can add computed
properties to a component to calculate a property on the fly. The benefit of this over invoking a method
is that computed properties are cached based on their dependencies.
<template> <section class="container"> <item-description></item-description> <h1 class="title"> {{message | capitalize}} </h1> <button @click="changeMessage" class="button">Change Message</button> <hr> <section> <h2>Mouse event</h2> <div>{{counter}}</div> <div @mouseover="inc">Mouse over here to change counter</div> </section> <section> <h2>Keyboard events</h2> <form @submit.prevent="submit"> <input type="text" v-model="firstName" @keyup.enter="submit" @keyup.alt.ctrl.shift.down="keyeventHandler"/> <button v-bind:disabled="buttonDisabled">{{buttonText}}</button> </form> <div> {{key}} </div> </section> </section> </template> <style scoped> .title { margin: 50px 0; } </style> <script> import ItemDescription from '../components/item-description'; export default { data() { return { message: 'this is my vue!', counter: 0, key: "", firstName: "", buttonText: "Add" } }, computed: { buttonDisabled: function() { return this.firstName == ""; } }, components: { ItemDescription }, filters: { capitalize(value) { return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase(); } }, methods: { changeMessage() { this.message = "Updated message here!" }, inc() { this.counter += 1; }, keyeventHandler() { this.key = "Ctrl + alt + shift + down is clicked" }, submit() { console.log("form is submitted, the value is", this.firstName); } } } </script>
相关文章
- VUE - 导航守卫
- vue使用sass
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
- [Nuxt] Build a Navigation Component in Vue.js and Use in a Nuxt Layout
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt
- [Vue] Use Vue.js Watchers to Respond to Async Updates
- vue.js3: 给滑动滚动添加上惯性(vue@3.2.26)
- vue.js 3.0.5:用vue-i18n开发i18n国际化功能(vue-i18n@9.2.0)
- springboot+vue实现前后端分离之前端vue部分(spring boot 2.5.4/vue.js 3.2.4)
- 使用Karma、Mocha实现vue单元测试
- Vue.js 入门指南
- [Vue-rx] Stream an API using RxJS into a Vue.js Template
- [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt
- [Nuxt] Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js
- vue.js 3.2.22:用useIntersectionObserver实现滑动到div可见时才运行css动画(@vueuse/core@7.0.3)
- vue.js3: 使用js-md5 (js-md5@0.7.3 / vue@3.2.26)
- vue.js 3.2.22:自动旋转的音乐播放按钮
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue项目报错:migrating.js?2bb5:56 [Element Migrating][ElInput][Event]: click is removed.
- 常用网络js链接大全(jQuery(3.4.1)、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
- 解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例
- 078:vue+openlayers实现游龙动画效果(代码示例)
- 【vue生命周期】
- vue+element ui+腾讯云开发打造会员管理系统之实战教程(三)系统登录
- Vue.js - webpack相关配置