文档章节

计算属性

BK灬
 BK灬
发布于 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>

 

© 著作权归作者所有

共有 人打赏支持
上一篇: Class与Style绑定
下一篇: 模板语法
BK灬

BK灬

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

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

f逍遥一世
2016/09/12
4
0
18.Swift学习之属性与方法

类的属性介绍 Swift中属性有多种 存储属性 存储属性是最简单的属性,它作为类实例的一部分,用于存储常量和变量 可以给存储属性提供一个默认值,也可以在初始化方法中对其进行初始化 下面是存...

YungFan
2018/10/21
0
0
09--swift之属性

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

飞翔的小二哈
2016/03/09
6
0
说说 Vue.js 的计算属性

1 应用场景 Vue.js 的表达式如果因为逻辑复杂变得过长时,就会变得臃肿,以至于难以阅读和维护。 这里我们对一个以分号分隔的字符串做逆序处理,并修改分隔符为逗号的表达式。 html: js: ...

deniro
2018/10/28
0
0
Ember.js 入门指南——计算属性(compute properties)

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

ubuntuvim
2015/09/08
218
0

没有更多内容

加载失败,请刷新页面

加载更多

centos操作时区

变更时区不需要重启 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 同步时间 ntpdate asia.pool.ntp.org...

果树啊
9分钟前
0
0
图解ZooKeeper的典型应用场景

zookeeper在很多框架中都有应用,例如:Dubbo,Hadoop,Kafka等,但典型的用法也就几种,掌握了这几种用法,再看zookeeper在相关框架中的应用就很轻松,下一篇文章将会详细介绍zookeeper在d...

Java填坑路
21分钟前
2
0
Hadoop之MapReduce理论篇

1. Writable序列化 序列化就是把内存中的对象,转换成字节序列 (或其他数据传输协议) 以便于存储 (持久化) 和网络传输。 反序列化就是将收到字节序列 (或其他数据传输协议) 或者是硬盘的持久...

飞鱼说编程
24分钟前
1
0
Java使用原生的HttpURLConnection发送http请求

/** * 发送http请求 * @param message 发送的内容 * @param snedUrl 请求的url * @return */public static String sendRequest(String message, String snedUrl) { log.e......

骑羊放狼灬
26分钟前
0
0
Java四种线程池两篇文章节选总结

Executor 可 以 创 建 3 种 类 型 的 ThreadPoolExecutor 线 程 池: 1. FixedThreadPool 创建固定长度的线程池,每次提交任务创建一个线程,直到达到线程池的最大数量,线程池的大小不再变化...

亭子happy
27分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部