【Vue2】computed和watch

VIP文章阿斯乐Code

已于 2022-08-21 14:38:43 修改

阅读量414

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-08-21 14:32:31 首次发布

本文链接：https://blog.csdn.net/weixin_45707229/article/details/126449481

版权

计算属性 computed

计算属性

new Vue({
   
    data...
	computed:{
   
        计算属性: {
   		// 对象形式
            get(){
   	//getter
				return ...
            } set(value){
   	// setter
				
            } 	
        }
    }
})

确定不需要写setter 的时候，可以简写↓

new Vue({
   
    data...
	computed：{
   	
    	计算属性(){
   //函数形式 	这个就相当于getter
			return 	...			// 必须写return
		}
    }
})

计算属性(){ 这里面不能开启异步任务 如setTimeout定时器 }

例：

<div>
        {
  {fullname}}
    </div>

<script>
    Vue.config.productionTip = false

    const vm =  new Vue({
     
        el:'div',
        data() {
     
            return {
     
                firstname:'张',
                lastname:'三'
            }
        },
        computed: {
     
            fullname: {
     
                get() {
     
                    return this.firstname+this.lastname
                },
                set(value) {
     
                    console.log('调用了计算属性的setter,value为：', value);
                    this.firstname = value.substring(0,1)
                    this.lastname = value.substring(1)
                }
            }