关于vue.js的计算属性练习代码
参照官网联系如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs计算属性</title>
</head>
<body>
<!-- 字母反转方式一：不推荐
-->
<div id="app-1">
{{ message.split('').reverse().join('') }}
</div>
<!-- 字母反转方式二
-->
<div id="app-2">
{{ message2 }}
<!-- 注意{}内的内容如果是方法要加()
-->
<p>反转后的内容{{ reverseMessage2() }}</p>
</div>
<!-- 字母反转方式三 此方法在括号中没有方法()-->
<div id="app-3">
<p>原始{{message3}}</p>
<p>反转后{{ reverseMessage3 }}</p>
</div>
<!-- 方法二和方法三的区别在于methods会实时刷新数据 而computed会在第一次加载后会产生缓存-->
<!-- Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS 。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。 -->
<div id="app-4">
{{fullName}}
</div>
<!-- 另一种实现方式-->
<div id="app-5">
{{ fullname }}
</div>
<!-- 计算属性可以满足需求而且书写简便 为什么需要watch?
来响应数据的变化。当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。 -->
<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>
Js文件
var app1=new Vue({
el: '#app-1',
data: {
message: 'Hello Ke'
},
})
var app2=new Vue({
el:'#app-2',
data:{
message2:'Hello Hou Hou'
},
methods: {
reverseMessage2: function () {
return this.message2.split('').reverse().join('')
}
}
});
var app3=new Vue({
el:'#app-3',
data:{
message3:'Zhou Er Ke'
},
computed:{
//a computed getter
reverseMessage3:function () {
return this.message3.split('').reverse().join('')
}
}
});
var app4 = new Vue({
el: '#app-4',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
});
var app5=new Vue({
el:'#app-5',
data:{
firstName: 'Foo',
lastName: 'Bar',
},
computed:{
fullname:function () {
return this.firstName+' '+this.lastName
}
}
});
关于vue.js的计算属性练习代码的更多相关文章
- Vue.js：计算属性
ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...
- vue.js实战——计算属性
1set和get: 注意: this.lastName=names[names.length-1];//解决连续输入空格后lastName消失的问题 练习代码如下: <!DOCTYPE html ...
- Vue.js之计算属性（computed）、属性监听（watch）与方法选项（methods）
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...
- Vue.js的计算属性
开始用vue会把所有的模版上的数据都放到data属性里,或者有的时候data属性里变量多了之后觉得有些只是用一次的变量就直接写到模版里了,后来看到同组的同事在用computed属性,就又去查了一下ap ...
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js操作元素属性
vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...
- 9.Vue.js 监听属性
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...
- Vue基础之计算属性
适用场景 设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题.看下面的例子: <!DOCTYPE html> ...
随机推荐
- css3实现头像旋转功能(超easy!!!)
简单好玩的头像旋转功能 html结构 <body> <img src="https://a-ssl.duitang.com/uploads/item/201604/29/2 ...
- python 面向对象编程学习
1. 问题:将所有代码放入一个py文件:无法维护 方案:如果将代码才分放到多个py文件,好处: 1. 同一个名字的变量互相不影响 2.易于维护 3.引用模块: import module 2.包:解决 ...
- SQL Server 2005中的CTE递归查询得到一棵树
感觉这个CTE递归查询蛮好用的,先举个例子: use City; go create table Tree ( ID int identity(1,1) primary key not null, N ...
- ThinkPHP(3)SQL查询语句
ThinkPHP中对查询语句,包含了基本的查询方式.表达方式.快速查询.区间查询.组合查询.SQL查询.动态查询和子查询. 一.查询方式 ThinkPHP提供了三种基本的查询方式:字符串条件查询.索引 ...
- android assets文件夹浅谈
---恢复内容开始--- 最近在研究assets文件夹的一些属性跟使用方法.根据网上一些文章.实例做一下汇总,拿出来跟大家分享下,有不足的地方还请多多指教. 首先了解一下assets是干什么用的,as ...
- RecyclerView因版本问题无法加载
前几天在学习RecyclerView时候,一直失败,各种加载不上.下面是错误信息 D/AndroidRuntime: Shutting down VM E/AndroidRuntime: FATAL ...
- Spring中Bean的生命周期方法
Bean的生命周期方法 src\dayday\Car.java package dayday;import com.sun.org.apache.xpath.internal.SourceTree;i ...
- 宁波uber优歩司机注册教程 UBER宁波司机注册指南！
自2012年Uber开始向全球进军以来,目前已进入全球56个国家和地区的市场,在全球超过270个城市提供服务, 而Uber公司的估值已高达412亿美元. [目前开通Uber优步叫车服务的中国城市] ...
- httpclient学习
httpclient入门: http://www.ibm.com/developerworks/cn/opensource/os-httpclient/ httpclient证书导入:http: ...
- JAVAWEB学习总结 HttpServletResponse对象（一）
Web服务器收到客户端(浏览器)的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象,和代表响应的response对象. request和response对象既然代表请求和响 ...