vue学习笔记day04 计算属性computed

最新推荐文章于 2024-05-24 11:04:47 发布

桑丘紫言

最新推荐文章于 2024-05-24 11:04:47 发布

阅读量123

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_39209728/article/details/104539982

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一 VUe计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
{{}}内放入了大量的逻辑代码，过重和难以维护
解决—》计算属性 [computed]
    基本写法：默认走的是get
        computed:{
            b:function(){
                //只能获取不能设置
            }
        }
    完整写法：
     computed: {
                属性名称: {
                    get: function() {},
                    set: function(val) {}
                }
            }

例子1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg.split("").reverse().join('') }} {{msg.split("").reverse().join('') }} {{msg.split("").reverse().join('') }} {{msg.split("").reverse().join('') }}
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "这是一个message",
            }

        })
    </script>
</body>

</html>

例子2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{msg }}</p>
        <p>{{b}}</p>
    </div>

    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "这是一个message",
            },
            computed: {
                b: function() { //要把b看作一个属性
                    return this.msg;
                }
            }

        })
        console.log(vm.msg)
        console.log(vm.b)
    </script>
</body>

</html>

例子3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{msg }}</p>
        <p>{{b}}</p>
        <p>{{b}}</p>
        <p>{{b}}</p>
    </div>

    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "这是一个message",
                a: 8
            },
            computed: {
                b: function() { //要把b看作一个属性
                    if (this.a < 10) {
                        return "0" + this.a
                    } else {
                        return this.a;
                    }

                }
            }

        })
        console.log(vm.msg)
        console.log(vm.b)
    </script>
</body>

</html>

例子4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{msg }}</p>
        <p>{{b}}</p>
        <p>{{b}}</p>
        <p>{{b}}</p>
    </div>

    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "这是一个message",
                a: 8
            },
            computed: {
                b: function() { //要把b看作一个属性
                    return this.a + 2;

                }
            }

        })
        window.onload = function() {
            // 赋值
            vm.b = 200
                // alert(vm.a);
        }
    </script>
</body>

</html>

例子5

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{a}}</p>
        <p>{{b}}</p>
    </div>

    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "这是一个message",
                a: 8
            },
            computed: {
                b: {
                    get: function() {
                        return this.a + 2;
                    },
                    set: function(val) {
                        this.a = val
                    }
                }
            }

        })
        window.onclick = function() {
            vm.b = 200
        }
    </script>
</body>

</html>

桑丘紫言

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记day04 计算属性computed

一 VUe计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。{{}}内放入了大量的逻辑代码，过重和难以维护解决—》计算属性 [computed] 基本写法：默认走的是get computed:{ b:function(){ //只能获取不能设置 ...
复制链接

扫一扫