文档章节

计算属性

AK灬
 AK灬
发布于 2017/04/21 17:03
字数 440
阅读 9
收藏 0
<html>
	<head>
		<title>VUE.JS实例</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
		<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
		<script src="C:/Users/Administrator/Desktop/jar/jquery-1.11.2.min.js"></script>
	</head>
	<body>
		<!-- mustache语法{{}} -->
		<div id = "example1">
			{{message1}}
		</div>
		<!-- 计算缓存(基于它们的依赖进行缓存的) -->
		<div id = "example2">
			<p>Original message: "{{ message }}"</p>
			<p>Computed reversed message: "{{ reversedMessage }}"</p>
		</div id = "example3">
		<!-- 方法不缓存 -->
		<div>
			<p>Original message: "{{ message2 }}"</p>
			<p>Reversed message: "{{ reversedMessage() }}"</p>
		</div>
		<!-- 回调 -->
		<div id = "example4">
			<p>{{fullname}}</p>
		</div>
		<!-- watch -->
		<div id = "watch-example">
			<p>
				Ask a yes/no question:<input v-model="question">
			</p>
			<p>
				{{ answer }}
			</p>
		</div>
		<script>
			// el代表VUE挂载的元素节点
		
			result1 = new Vue({
				el : '#example1',
				data : {message1 : 'content'}
			});
			// result2.message='content'
			result2 = new Vue({
				el : '#example2',
				data : {
					message : 'Hello'
				},
				// 计算属性(缓存结果)
				computed : {
					reversedMessage : function (){
						return this.message.split('').reverse().join('')
					}
				}
			});
			result3 = new Vue({
				el : '#example3',
				data : {
					message2 : 'Hello2'
				},
				// 方法属性(不缓存结果)
				methods: {
					reversedMessage : function(){
					  return this.message2.split('').reverse().join('');
					}
				}
			});
			result4 =  new Vue({
				el : '#example4',
				data : {
					firstname : 'wang',
					middlename : 'bing',
					lastname : 'an'
				},
				// computed默认让变量有函数
				computed : {
					fullname :{
						// 默认为getter
						get : function (){
							return this.firstname+this.middlename+this.lastname
						},
						// settr result4.fullname='A B C'
						set : function(newValue){
							names = newValue.split('');
							firstname = names[0],
							middlename = names[1],
							lastname = names[2]
						}
					}
				}
			});
			
			result5 = new Vue({
				el : '#watch-example',
				data : {
					question : '',
					answer : 'I cannot give you an answer until you ask a question!'
				},
				watch : {
					// 如果question发生改变,这个函数就会运行
					question : function(newQuestion){
						this.answer = 'Waiting for you to stop typing...',
						this.getAnswer();
					}
				},
				method : {
					// _.debounce (function(){},等待的毫秒数)是一个通过lodash限制操作频率的函数。
					// 在这个例子中,我们希望限制访问yesno.wtf/api的频率
					// ajax请求直到用户输入完毕才会发出
					// 学习更多关于 _.debounce function (and its cousin_.throttle), 参考: https://lodash.com/docs#debounce
					getAnswer : _.debounce(
						function(){
							vm = this
							if(this.question.indexOf('?') === -1){
								vm.answer = 'Questions usually contain a question mark. ;-)'
								return
							}
							vm.answer = 'Thinking...'
							axios.get('https://yesno.wtf/api')
								.then(function(response){
									vm.answer = _.capitalize(response.data.answer)
								})
								.catch(function(error){
									vm.answer = 'Error! Could not reach the API. ' + error
								})
						},
						// 这是我们为用户停止输入等待的毫秒数   
						500
					)
				}
			});
		</script>
	</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
AK灬

AK灬

粉丝 46
博文 343
码字总数 142342
作品 0
朝阳
后端工程师
Swift 计算属性

计算属性 除存储属性外,类、结构体和枚举可以定义计算属性,计算属性不直接存储值,而是提供一个 getter 来获取值,一个可选的 setter 来间接设置其他属性或变量的值。 struct Point {var ...

f逍遥一世
2016/09/12
4
0
《从零开始学Swift》学习笔记(Day 32)——计算属性

原创文章,欢迎转载。转载请注明:关东升的博客 计算属性本身不存储数据,而是从其他存储属性中计算得到数据。 计算属性概念: 计算属性提供了一个getter(取值访问器)来获取值,以及一个可...

智捷课堂
2015/11/06
0
0
09--swift之属性

1.属性简介 在类,结构体,枚举中都用属性,属性将值跟特定的类,结构体,枚举关联 。存储属性存储变量或者常量作为实例的一部分,而计算属性计算一个值。 计算属性可以用于类,结构体,枚举...

飞翔的小二哈
2016/03/09
6
0
Ember.js 入门指南——计算属性(compute properties)

本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站。 1,简单的计算属性 简单地来说,计算属性就是将函数声明为属性。其实就是就是在类扩展的时候为类定义的属性。...

ubuntuvim
2015/09/08
218
0
Vue笔记(4) - 计算属性:computed 与 侦听器:watch

https://cn.vuejs.org/v2/guide/computed.html 不得不说,文档写的真好。想起曾经学Angular、Ionic时看的英文文档,学了之后却没什么用,说多了都是泪。 以下笔记部分摘自官网 这里我们声明了...

神奇的小卷毛
04/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
33分钟前
0
0
Shell | linux安装包不用选择Y/N的方法

apt-get install -y packageOR echo "y" | sudo apt-get install package

云迹
今天
1
0
Hadoop的大数据生态圈

基于Hadoop的大数据的产品圈 大数据产品的一句话概括 Apache Hadoop: 是Apache开源组织的一个分布式计算开源框架,提供了一个分布式文件系统子项目(HDFS)和支持MapReduce分布式计算的软件架...

zimingforever
今天
4
0
八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
今天
2
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部