学习vue.js计算属性


Posted in Javascript onDecember 03, 2016

关于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
}
}
});

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
学习vue.js中class与style绑定
Dec 03 #Javascript
jQuery图片轮播实现并封装(一)
Dec 03 #Javascript
jQuery 选择符详细介绍及整理
Dec 02 #Javascript
JQuery 动态生成Table表格实例代码
Dec 02 #Javascript
jQuery实现背景滑动菜单
Dec 02 #Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 #Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 #Javascript
You might like
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
js 居中漂浮广告
2010/03/21 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
详解python3百度指数抓取实例
2016/12/12 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
普通简短的个人自我评价
2014/02/15 职场文书
电子信息工程自荐信
2014/05/26 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
信仰心得体会
2014/09/05 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
golang生成并解析JSON
2022/04/14 Golang
Redis特殊数据类型bitmap位图
2022/06/01 Redis
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL