[Vue] Use Vue.js Component Computed Properties
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 ;
} </style> <script> import ItemDescription from '../components/item-description'; export default {
data() {
return {
message: 'this is my vue!',
counter: ,
key: "",
firstName: "",
buttonText: "Add"
}
}, computed: {
buttonDisabled: function() {
return this.firstName == "";
}
}, components: {
ItemDescription
}, filters: {
capitalize(value) {
return value.charAt().toUpperCase() + value.slice().toLowerCase();
}
}, methods: {
changeMessage() {
this.message = "Updated message here!"
}, inc() {
this.counter += ;
}, keyeventHandler() {
this.key = "Ctrl + alt + shift + down is clicked"
}, submit() {
console.log("form is submitted, the value is", this.firstName);
}
}
} </script>
[Vue] Use Vue.js Component Computed Properties的更多相关文章
- Vue:Vue的介绍以及组件剖析
介绍 现在,随着基于JavaScript的单页应用程序(SPA)和服务器端渲染(SSR)的兴起,可以用JavaScript编写整个前端应用程序,并整洁地管理和维护该应用程序的前端代码.诸如Angula ...
- [Vue] Dynamic Vue.js Components with the component element
You can dynamically switch between components in a template by using the reserved <component> ...
- Vue.mixin Vue.extend(Vue.component)的原理与区别
1.本文将讲述 方法 Vue.extend Vue.mixin 与 new Vue({mixins:[], extend:{}})的区别与原理 先回顾一下 Vue.mixin 官网如下描述: Vue. ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- Vue(七):computed计算属性
简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...
- require.js 加载 vue组件 r.js 合并压缩
https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...
- 19.VUE学习之- v-for与computed结合功能 筛选实例讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密
一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
随机推荐
- POJ——T 1006 Biorhythms
http://poj.org/problem?id=1006 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 138219 ...
- 5.9 enum--支持枚举类型
enum模块提供了枚举类型的支持.枚举类型是由一个名称和一个统一值来组成.值是常量的值.它们之间能够通过名称进行比較和引用,还能够迭代訪问. 5.9.1 模块内容 本模块主要定义了两种枚举类型:Enu ...
- 学习笔记(一):offset
很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...
- C# foreach 循环遍历数组
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- 【Codeforces Round #446 (Div. 2) B】Wrath
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 倒着来,维护一个最小的点就可以了. [代码] #include <bits/stdc++.h> using namesp ...
- android--显式跳转和隐式跳转的差别使用方法
#创建第二个activity * 新创建的activity.必须在清单文件里做配置,否则系统找不到,在显示时会直接报错 <activity android:name="com.ithe ...
- Dcloud课程5 php如何实现文件缓存技术(静态数据缓存)
Dcloud课程5 php如何实现文件缓存技术(静态数据缓存) 一.总结 一句话总结:保存在磁盘上的静态文件,用PHP生成数据到静态文件中.其实cookie和session使用的就是这样的技术,所以c ...
- 打开utf-8文件乱码的解决方法
gvim一直用的好好的,但是今天看一网友贴出来的代码时,却发现中文显示乱码了.... 使用notepad++打开,右下角显示是utf-8 w/0 BOM. 马上放狗, 发现解决方法如下: 在_vi ...
- sublime找到成对标签(Ctrl+Shift+")
sublime找到成对标签(Ctrl+Shift+") windows版本默认快捷键是Ctrl+Shift+" sublime text怎么突出显示成对标签 使用BracketHi ...
- UVA 11987 - Almost Union-Find
第一次交TLE,说好的并查集昂. 好吧我改.求和.个数 在各个步骤独立算.. 还是TLE. 看来是方法太慢,就一个数组(fa),移动的话,移动跟结点要遍历一次 T T 嗯,那就多一个数组. 0.189 ...