关于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> ...
随机推荐
- Java 设计模式学习
看完headfirst设计模式,简单总结一下. 写在最前面:设计模式的关心的问题为"弹性.易于维护.易于扩展",通过对模式的应用,让自己的代码能够得到良好的可塑性.但是个人认为不能 ...
- mysql免安装版本
[下载MySQL 5.6.13] 从MySQL官方网站mysql.com找到MySQL Community Server 5.6.13的下载地址为http://dev.mysql.com/downlo ...
- OpenSSL 使用拾遗（一）---- 生成 pkcs12 文件
从本期开始,记录一些在使用 OpenSSL 过程中碰到的问题及解决办法 在 Linux 下需要生成 pkcs12 文件,立即想到 OpenSSL.键入如下命令 ~ # openssl pkcs12 - ...
- 使用windows crypt API解析X509证书
一.版本号 结构体CERT_INFO中的字段dwVersion即为证书版本,可以直接通过下面的代码获得: DWORD dwCertVer = m_pCertContext->pCertInfo- ...
- 1Caesar加密
Julius Caesar发明的较早的加密术,举个例子: 明文: meet me after the toga party 密文: PHHW PH DIWHU WKH WRJD SDUWB 其实就 ...
- Discuz插件开发中的困惑
1.关于缓存 这几天一直纠结于Discuz的缓存问题,今天终于有点小发现:首先Discuz的缓存可以通过数据库.文件等方式进行!在Discuz的配置文件config_global.php中有一个配置项 ...
- ibatis
ibatis学习笔记(一)>>>>>>>sqlMapConfig.xml文件详解 1.sqlMapConfig.xml配置文件详解: Xml代码 1. < ...
- 使用FlaycoBanner实现图片轮播效果（加载网络图片）
FlaycoBanner是一个开源图片轮播框架,支持android2.2及以上: git地址:https://github.com/H07000223/FlycoBanner_Master 在andr ...
- 类A have-a 类B，类B访问类A public 成员
需求是类A中包含类B,而类B又需要访问类A的public属性的成员. 首先类B中要访问类A的属性,那么对于类B而言,我们必须要知道有类A这个类,所以在类B的具体实现之前我们需要前向声明类A. 对于类A ...
- 世界超强完美DIY 电子奇才五年全手工制作CPU
世界超强完美DIY 电子奇才五年全手工制作CPU 2015-07-08 极客范 (点击上方公众号,可快速关注我们) 在如今越来越靠程序化.流水线作业来完成生产的制造业中,想找一件手工打造的产品,真是越 ...