《Vue3实战》 第五章 计算、监听属性

《Vue3实战》篇章整体栏目
—————————————————————————————
【第一章】node.js/npm安装、配置
【第二章】创建项目和目录结构
【第三章】基础语法
【第四章】条件语句、循环语句
【第五章】计算、监听属性
【第六章】样式绑定和事件处理
【第七章】表单
【第八章】自定义指令
【第九章】路由
【第十章】Element plus指南
【第十一章】Vue3实战之打造新闻系统前端模板
—————————————————————————————

—————————————————————————————

前言

Vue3计算、监听属性

1、计算属性

1.1、计算属性关键词: computed

<template>   
    <h1>{{n}} 的5倍是{{multipleN}}</h1>
</template>

<script>
export default{
    name: 'SentenseTest',    
    data(){
        return{
            n : 6
        }
    },
    computed:{
        multipleN : function(){
            return this.n * 5;
        }
    }
}
</script>

1.2、computed setter

<template>   
    <h1>{{firstName}} {{lastName}}</h1>
</template>

<script>

export default{
    name: 'SentenseTest',    
    data(){
        return{
            firstName: "tom",
            lastName: "jerry"
        }
    },
    computed:{
        fname:{
            get:function(){
                return this.firstName + " " + this.lastName;
            },
            set:function(newValue){
                var names = newValue.split(" ");
                this.firstName = names[0];
                this.lastName = names[1];
            }
        }
    },
    mounted(){
        this.fname = "Jack kara"
    }
}

2、监听属性

Vue3 监听属性 watch，我们可以通过 watch 来响应数据的变化。

2.1、例子1 计数器

<template>   
    <h1>
       <p>{{counter}}</p>
       <button @click="counter++">累加</button>     
    </h1>
</template>
<script>
export default{
    name: 'SentenseTest',    
    data(){
        return{
            counter: 1
        }
    },
    mounted(){
        this.$watch('counter', function(nval, oval) {
            alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
        });
    }    
}
</script>

2.2、例子2 千米与米的换算

<template>   
    <h1>
      <p>千米：<input type="text" v-model="kilometers" @focus="currentActiveField='kilometers'"/></p>
      <p>千米：<input type="text" v-model="meters" @focus="currentActiveField='meters'"/></p>  
      <p id = "info"></p>
    </h1>
</template>
<script>
export default{
    name: 'SentenseTest',    
    data(){
        return{
            meters : 0,
            kilometers : 0
        }
    },
    watch:{
        kilometers : function(nVal){
            if(this.currentActiveField === 'kilometers'){
                this.kilometers = nVal;
                this.meters = this.kilometers * 1000;
            }
        },
        meters:function(nVal){
            if(this.currentActiveField === 'meters'){
                this.meters = nVal;
                this.kilometers = nVal / 1000;
            }
        }
    },
    mounted(){
        this.$watch('kilometers', function(nVal, oVal) {
            document.getElementById("info").innerHTML = "修改前的值：" + nVal +",修改后的值：" + oVal;
        });
    }    
}
</script>