您的位置:首页 > Web前端 > Vue.js

VUE计算属性关键词: computed

2021-01-10 22:15 525 查看
<!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属性的时候,则属性更改下:

 

 


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: