vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed
computed:{
b:function(){ //默认调用get
return 值
}
}
--------------------------
computed:{
b:{
get:
set:
}
}
* computed里面可以放置一些业务逻辑代码，一定记得return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
a => {{a}}
<br>
b => {{b}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:{
//业务逻辑代码,b的值完全取决于return回来的值
get:function(){
return this.a+2;//默认调用get
},
set:function(val){
this.a=val;
}
}
}
}); document.onclick=function(){
vm.b=10;//相当于set函数传入val=10
};
</script>
</body>
</html>
vue教程2-03 vue计算属性的使用 computed的更多相关文章
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- vue教程1-09 交互 vue实现百度下拉列表
vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue入门(二)----模板与计算属性
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
- vue 生命周期钩子 过滤器 计算属性
每一个Vue实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测.编译模板.挂载实例到DOM,然后在数据变化时更新DOM,在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了 ...
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- Vue基础第三章 - 计算属性
1.计算属性介绍 在第二章中我们介绍了在Vue的{{}}中可以使用一些简单的表达式进行计算,但是当表达式过长或者逻辑过于复杂就会变得不易理解和维护,比如第二章的示例{{ text.split(',') ...
- vue文档阅读笔记——计算属性和侦听器
页面链接:https://cn.vuejs.org/v2/guide/computed.html 注意点 计算属性用于 替代模板内的表达式. 如果计算属性所依赖的属性未更新,会返回自身的缓存. 侦听器 ...
随机推荐
- centos 下备份oracle数据
一.在xshell下root用户登录服务器 1.新建oracle数据库备份目录 mkdir -p /casnw/backup/oradata6910bak 2.设置目录权限为oinstall用户组的o ...
- 关于xftp上传文件状态错误的解决
新建一个文件夹,/usr/local/wwj 更改wwj权限 chmod 777 wwj 然后就可以上传了 如果还不行,就关闭防火墙
- Object.create() 创建实例对象
var person1 = { name: '张三', age: 38, greeting: function() { console.log('Hi! I\'m ' + this.name + '. ...
- 天使投资、A轮、B轮、C轮
一般是这样划分的. A轮融资:公司产品有了成熟模样,开始正常运作一段时间并有完整详细的商业及盈利模式,在行业内拥有一定地位和口碑.公司可能依旧处于亏损状态.资金来源一般是专业的风险投资机构(VC).投 ...
- Asp.net 修改已有数据的DataTable中某列的数据类型
DataTable dt_PI = new DataTable(); //克隆表结构 dt_PI = ds.Tables[].Clone(); dt_PI.Columns["FLTFullP ...
- WordPress-Word图片上传插件整合教程-Xproer.WordPaster
插件下载(PHP):wordpress 3.7.1, 说明:由于许多插件可能使用相同钩子,导致冲突,所以提供手支方式整合. 1.上传插件目录. 说明:WordPress 3.7.1 使用的是TinyM ...
- Kafka C++客户端库librdkafka笔记
目录 目录 1 1. 前言 2 2. 缩略语 2 3. 配置和主题 3 3.1. 配置和主题结构 3 3.1.1. Conf 3 3.1.2. ConfImpl 3 3.1.3. Topic 3 3. ...
- 20169207《linux内核原理与分析》第二周作业
第一部分:学习MOOC网Linux内核分析的课程. 首先对冯诺依曼体系结构和存储程序计算机工作模型进行了了解,查阅资料,对冯诺依曼体系的特点与课堂上的相结合,真实明白了模型的特点. 在汇编C语言程序时 ...
- eclipse生成可执行jar包（引入第三方.jar文件）
1. eclipse建立普通的java project项目(项目名aa) 2. 项目正常组织通过buildpath加载各种jar包入项目aa比如例子项目里,加入了spring 各种jar包加入各种配置 ...
- Javascript 对象继承 原型链继承 对象冒充 call 混合方式
一.原型链继承 function ClassA() {} ClassA.prototype.color = "blue"; ClassA.prototype.sayColor = ...