学习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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
学习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站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
react build 后打包发布总结
2018/08/24 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
在Python的Flask框架中实现全文搜索功能
2015/04/20 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
个性大学生自我评价
2013/12/04 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
全陪导游词
2015/02/04 职场文书
盗窃案辩护词
2015/05/21 职场文书