computed计算属性

最新推荐文章于 2022-07-08 14:28:25 发布

锁忆党

最新推荐文章于 2022-07-08 14:28:25 发布

阅读量157

点赞数 1

文章标签： vue.js

原文链接：https://blog.csdn.net/liantaiyou/article/details/104972673

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="text" v-model="str">
<!--    <p>{{fn(str)}}</p>-->
<!--    <p>{{fn(str)}}</p>-->
<!--    <p>{{fn(str)}}</p>-->
<!--    <p>{{fn(str)}}</p>-->
<!--    <p>{{str.split("").reverse().join("")}}</p>-->
<!--    <p>{{str | reverStr}}</p>-->
<!--    <p>{{str | reverStr}}</p>-->
<!--    <p>{{str | reverStr}}</p>-->
<!--    <p>{{str | reverStr}}</p>-->
<!-- 以上方法每次都会执行 -->
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <p>{{comReverse}}</p>
    <!-- 当成属性去使用，如果数据重复使用的话，computed只执行一次，只有当数据
    发生改变的时候。computed才会再次执行 -->
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            // 指定你的数据属性
            str:"这里有一盘西瓜"
        },
        // 计算属性
        computed:{
            // 定义了一个名字为comReverse的计算属性
            comReverse(){
                // 结果
                console.log(3333333);
                return this.str.split("").reverse().join("");
                //将字符串分割变成数组之后进行反转，在转为字符串
            }
        },
        filters:{
            reverStr(v){
                console.log(2222222)
                return v.split("").reverse().join("");
            }
        },
        methods:{
            // 指定方法
            fn(v){
                console.log(111111111)
                return v.split("").reverse().join("");
            }
        },
        mounted(){
            // 当你的实例在页面当中挂载完毕之后会执行。
        }
    })
</script>
</html>

锁忆党

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
computed计算属性

Title ————————————————版权声明：本文为CSDN博主「liantaiyou」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/liantaiyou/article/details/104972673...
复制链接

扫一扫