Vue 计算属性与方法

前端开发作者： 2024-08-20 09:35:01

computed 基本使用如果数据需要有复杂的计算，则可以在Vue实例中定义计算属性，再交由mustache进行渲染。 computed内部其实是通过getttr实现的，所以不用加括号即可完成其下方

computed

<div id="app">
    书籍的总价格是:{{totalPrice}}
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",data: {
            books: {
                "Vue实战": 128,"JavaScrip入门": 99,"HTML5初识": 87,"CSS3": 68,}
        },computed: {
            totalPrice() {
                return Object.values(this.books).reduce((pre,cur) => {
                    return pre + cur;
                },0)
            }
        }
    })
</script>

methods

<body>
<div id="app">
    书籍的总价格是:{{totalPrice()}}
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",computed: {

        },methods:{
            totalPrice() {
                return Object.values(this.books).reduce((pre,0)
            }
        }
    })
</script>
</body>

差异区别

<body>
<div id="app">
    {{computedAdd}}
    {{computedAdd}}
    {{computedAdd}}
    <hr>
    {{methodsAdd()}}
    {{methodsAdd()}}
    {{methodsAdd()}}
    <button type="button">查看各执行几次</button>
</div>
<script src="./vue.js"></script>
<script>

    let computedCount = 0;
    let methodsCount = 0;

    const app = new Vue({
        el: "#app",data: {
            num1: 100,num2: 200,},computed: {
            computedAdd() {
                computedCount++;
                return this.num1 + this.num2;
            }

        },methods: {
            methodsAdd() {
                methodsCount++;
                return this.num1 + this.num2;
            }
        }
    })

    document.querySelector("button").addEventListener("click",() => {
        console.log(`computed调用了${computedCount}次`);
        console.log(`methods调用了${methodsCount}次`);
    },)

</script>
</body>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_65443.html

相关资讯： Vue 计算属性与方法