Vue（十一）计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
</head> <body> <div id="app"> <!-- 1. 普通属性 -->
<h2>{{msg}}</h2>
<!-- 对数据处理再显示 -->
<h3>{{msg.split('').reverse().join('')}}</h3> <!-- 2. 计算属性 -->
<h2>{{msg2}}</h2>
<h3>{{reverseMsg}}</h2> <hr> <button v-on:click="change">修改msg的值</button> <hr> <h1>{{num1}}</h1>
<h1>{{num2}}</h1>
<h1>{{getNum2()}}</h1> <hr> <button v-on:click="changeNum1">修改num1的值</button>
<button onclick="fn()">测试</button> <hr> <!-- 计算属性的get、set方法 -->
<button @click="change2">修改计算属性</button> </div>
<script> var vm = new Vue({
el:'#app',
data:{ //普通属性
msg:'Hello World!~',
num1:9
},
computed:{ //计算属性
msg2:function(){ //该函数必须有返回值，用来获取属性，称为get函数
return "你好，世界"
},
reverseMsg:function(){
//可以包含逻辑处理操作，同时reverseMsg依赖于msg
return this.msg.split('').reverse().join('');
},
/* num2:function(){
console.log(new Date());
return this.num1-1;
}, */
num2:{
get:function(){
console.log(new Date());
return this.num1-1;
},
set:function(val){
this.num1=111;
}
}
},
methods:{
change(){
this.msg='Hello Kitty!~'
},
changeNum1(){
this.num1=666
},
getNum2(){
console.log(new Date());
return this.num1-1;
},
change2(){
this.num2=111;
}
}
}) function fn(){
setInterval(function(){
/* 计算属性与方法区别 */
/* console.log(vm.num2); */
console.log(vm.getNum2());
},1000)
} </script> </body> </html>
Vue（十一）计算属性的更多相关文章
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- vue的计算属性
在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- Vue.js 计算属性
Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- Vue之计算属性
上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...
- Vue.js 计算属性的秘密
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...
随机推荐
- EF连接MySql数据库
Windows要想EF连接MySql,首先要安装两个应用程序 mysql-connector-net-6.8.8.msimysql-for-visualstudio-1.2.7.msi 项目还需要两个 ...
- 【BZOJ4712】洪水
题解: 注意题目说了每个点的权值只能增加 每个点的dp方程比较简单 min(v[i],sum[i]) 那么我们考虑如果v[i]增加那么上面使用sum[i]的会带来影响 暴力的做就是一个个往上查然后修改 ...
- img 标签的 usemap 属性
<img src="1.gif" alt="Planets" usemap="#Map"/> <map name=&quo ...
- Servlet解决中文乱码问题
request.setCharacterEncoding("UTF-8"); 并且把这句话放在request.getParameter()之前
- .net core cookie登录和session的 DataProtectionProvider 加入 redis
string redisConnectionString = Configuration.GetSection("Storage:Redis").GetValue<strin ...
- 07. Matplotlib 3 |表格样式| 显示控制
1.表格样式创建 表格视觉样式:Dataframe.style → 返回pandas.Styler对象的属性,具有格式化和显示Dataframe的有用方法 样式创建:① Styler.applymap ...
- JavaSE| 网络编程
URL URI(Uniform resource identifier):表示一个统一资源标识符 (URI) 引用,用来唯一的标识一个资源. URL(Uniform Resource Locator) ...
- 3、Qt Project之Socket网络编程
Socket网络编程 Step1:首先完成整个界面的设计 <?xml version="1.0" encoding="UTF-8"?> <u ...
- Python之IO编程——文件读写、StringIO/BytesIO、操作文件和目录、序列化
IO编程 IO在计算机中指Input/Output,也就是输入和输出.由于程序和运行时数据是在内存中驻留,由CPU这个超快的计算核心来执行,涉及到数据交换的地方,通常是磁盘.网络等,就需要IO接口.从 ...
- MLR：利用多元线性回归法，从大量数据中提取五个因变量来预测一个自变量—Jason niu
from numpy import genfromtxt from sklearn import linear_model datapath=r"Delivery_Dummy.csv&quo ...