15.计算属性Setter进阶 ---(vue入门 文档学习记录)

计算属性setter

一般情况计算属性只有getter,并且默认不用显示的表明getter方法,也可以有setter方法:

<div id="app15">
			<p>
				<input v-model="message"></input>
				<input v-model="revmessage"></input>
				<input v-model="messagerep"></input>
			</p>
		</div>
		<script>
			var vm =new Vue({
				el:"#app15",
				data:{
					message:"hello",
					messagerep:""
				},
				computed:{
					revmessage:{
					get: function(){
						return this.message.split("").reverse().join("")+Date.now();
					},
					set: function(newValue){
						console.log(newValue)
						this.messagerep=newValue;
					}
					}
				}
			})
			vm.revmessage = 'John Doe'
		</script>

这时,getter与setter都是显式的,需要注意的是,setter可以在vue实例外被调用即 vm.revmessage = ‘John Doe’;也可以在内部调用,只不过不会响应到页面,除非该计算属性在data中进行声明了.

多个计算属性

var vm = new Vue({
						el: "#app15",
						data: {
							message: "hello",
							revmessage:""

						},
						computed: {
							revmessage: {
								get: function() {
									return this.message.split("").reverse().join("") + Date.now();
								},
								set: function(newValue) {
									console.log(newValue)
									this.messagerep = newValue;
								}
							},
							messagerep: function() {
								this.revmessage="gaibiao";
								return this.message + Date.now();
							}
						}

				})

多个计算属性,可以直接用逗号隔开写.该例子可以测试多种情况,比如在messagerep属性getter中重新设置另外一个计算属性revmessage会出现怎样的情况,等,有兴趣可以自己试试,用处不大这里就不多说了.