VUE计算属性关键词: computed

项目
实战项目总结分析,源代码,视频分享
tea_year
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算列属性</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>原始字符串:{{message}}</p>
			<p>计算后反转字符串:{{reversedMsg}}</p>
			<p>使用methods的反转字符串:{{reversedMsg2()}}</p>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					message:'www.csdn.net'
				},
				computed:{
					//计算属性的getter
					reversedMsg:function(){
						//this:指向new Vue()的实例;
						return this.message.split('').reverse().join('')
					}
				},
				methods:{
					reversedMsg2:function(){
						return this.message.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>computed setter</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{site}}</p>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					name:'Google',
					url:'http://www.51cto.com'
				},
				computed:{
					site:{
						//getter
						get:function(){
							return this.name+''+this.url
						},
						//setter
						set:function(newValue){
							var names=newValue.split(' ')
							this.name=names[0]
							this.url=names[names.length-1]
						}
					}
				}
			})
			//调用setter,vm.name和vm.url也会被对应更新;
			//vm.site='程序员俱乐部:http://www.csdn.net';
			console.log('name:'+vm.name);
			console.log('<br/>');
			console.log('url:'+vm.url);
		</script>
	</body>
</html>

 

 当更改vm的site属性的时候,则属性更改下:

 

 

展开阅读全文
©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读