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

痛定思痛。 2021-12-17 12:47 239阅读 0赞

**计算属性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中进行声明了.

**多个计算属性**

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