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

àì夳堔傛蜴生んèń 2023-09-26 20:47 206阅读 0赞

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

#### 目录 ####

*  前言
 *  1、计算属性
 *   *  1.1、计算属性关键词: computed
     *  1.2、computed setter
 *  2、监听属性
 *   *  2.1、例子1 计数器
     *  2.2、例子2 千米与米的换算

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

## 前言 ##

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>

[node.js_npm]: https://blog.csdn.net/s445320/article/details/130107403
[Link 1]: https://blog.csdn.net/s445320/article/details/130108162
[Link 2]: https://blog.csdn.net/s445320/article/details/130198834
[Link 3]: https://blog.csdn.net/s445320/article/details/130200350
[Link 4]: https://blog.csdn.net/s445320/article/details/130200783
[Link 5]: https://blog.csdn.net/s445320/article/details/130200903
[Link 6]: https://blog.csdn.net/s445320/article/details/130213404
[Link 7]: https://blog.csdn.net/s445320/article/details/130213662
[Link 8]: https://blog.csdn.net/s445320/article/details/130110029
[Element plus]: https://blog.csdn.net/s445320/article/details/130197081