VUE框架计算属性的实际使用和简写形式------VUE框架

旧约Alatus

已于 2023-11-28 21:42:02 修改

阅读量335

点赞数 10

分类专栏： # VUE框架前端文章标签： vue.js 前端 javascript 前端框架 ecmascript vue html5

于 2023-11-28 11:56:54 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134664210

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <input type="text" v-model:value="info"/>
        <br>
        
        <h1>反转的信息:{{reInfo()}}</h1>
        <h1>计算属性的实现:{{hehe}}</h1>
        <h1>计算属性的简写:{{reverseInfo}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Heelo",
                info : ""
            },
            methods : {
                reInfo()
                {
                    return this.info.split('').reverse().join('');
                }
            },
            // 什么是VUE的计算属性
            // 使用VUE的原有属性,经过一系列计算运算后,最终得到了一个全新的属性叫做计算属性
            // VUE的原有属性,data对象当中的属性叫做VUE的原有属性
            // 全新的属性生成后,就与data中的属性无关了,新的属性有自己的属性名和属性值
            // 计算属性怎么写
            // 计算属性有缓存机制,可以从缓存内获取,不需要每次调用方法去获得,提高了效率
            computed : {
                // 完整写法,set不需要才可以使用简写方式
                hehe : {
                    // 可以编写set和get方法
                    // 当读取计算属性的值的时候,get方法自动调用
                    // 第一个访问时机,第一次访问,第二次时计算属性管理的属性改变也会调用
                    // 这里同样不能写为箭头函数,因为箭头函数的this指向window对象
                    get()
                    {
                        console.log("GET方法");
                        // console.log(this === vm);
                        return this.info.split('').reverse().join('');
                    },
                    // 但修改计算属性值的时候,调用set方法
                    set(val)
                    {
                        console.log("SET方法");
                        // console.log(this === vm);
                        // 怎么修改计算属性的值
                        // 计算属性变化取决于计算属性关联的原属性的值
                        // 所以我们修改原始属性就好了
                        this.info = val;
                    }
                },
                reverseInfo()
                {
                    return this.info.split('').reverse().join('');
                }
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="../js/vue.js"></script>

</head>

<body>

<div id="app">

<h1>{{msg}}</h1>

<input type="text" v-model:value="info"/>

<br>



<h1>反转的信息:{{reInfo()}}</h1>

<h1>计算属性的实现:{{hehe}}</h1>

<h1>计算属性的简写:{{reverseInfo}}</h1>

</div>

<script>

const vm = new Vue({

el : "#app",

data : {

msg : "Heelo",

info : ""

},

methods : {

reInfo()

{

return this.info.split('').reverse().join('');

}

},

// 什么是VUE的计算属性

// 使用VUE的原有属性,经过一系列计算运算后,最终得到了一个全新的属性叫做计算属性

// VUE的原有属性,data对象当中的属性叫做VUE的原有属性

// 全新的属性生成后,就与data中的属性无关了,新的属性有自己的属性名和属性值

// 计算属性怎么写

// 计算属性有缓存机制,可以从缓存内获取,不需要每次调用方法去获得,提高了效率

computed : {

// 完整写法,set不需要才可以使用简写方式

hehe : {

// 可以编写set和get方法

// 当读取计算属性的值的时候,get方法自动调用

// 第一个访问时机,第一次访问,第二次时计算属性管理的属性改变也会调用

// 这里同样不能写为箭头函数,因为箭头函数的this指向window对象

get()

{

console.log("GET方法");

// console.log(this === vm);

return this.info.split('').reverse().join('');

},

// 但修改计算属性值的时候,调用set方法

set(val)

{

console.log("SET方法");

// console.log(this === vm);

// 怎么修改计算属性的值

// 计算属性变化取决于计算属性关联的原属性的值

// 所以我们修改原始属性就好了

this.info = val;

}

},

reverseInfo()

{

return this.info.split('').reverse().join('');

}

}

});

</script>

</body>

</html>