vue.js计算机属性01-阿里云开发者社区

vue.js计算机属性01

2022-11-08 102

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue.js计算机属性01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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">
        <p>用插值表达式计算总价：￥{{shop[0].price*shop[0].count + shop[1].price*shop[1].count + shop[2].price*shop[2].count }}</p>
        <!-- 调用计算属性totalprice，调用时不能加括号 -->
        <p>第一次用计算属性计算商品总价：￥{{totalprice}}</p>
        <!-- 第二次调用的时候，由于计算属性所依赖的商品数据没有发生改变，所以第二次调用计算属性的时候，Vue会直接从计算属性的缓存中取出上一次的调用计算属性时的计算结果，而不会重复执行计算属性的代码 -->
        <p>第二次用计算属性计算商品总价：￥{{totalprice}}</p>
        <!-- 方法是没有缓存的,所以调用了多少次,就会重复多少次方法执行方式 -->
        <p>第一次用方法total计算商品总价:￥{{ total() }}</p>
        <p>第二次用方法total计算商品总价:￥{{ total() }}</p>
        <!-- 当修改totalprice和total所依赖的数据后，totalprice最多只执行一次，而total会执行多次 -->
        <p>修改计算属性和方法所依赖的商品数据:<input type="number" v-model= "shop[1].count"></p>
        <p>修改计算属性和方法不依赖的数据title:<input type="text" v-model = "title"></p>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                title:'购物车',
                shop:[
                    {
                        name:'OPPO R15',
                        price:2999,
                        count:3
                    },
                    {
                        name:'华为P20',
                        price:2699,
                        count:2
                    },
                    {
                        name:'苹果13',
                        price:1999,
                        count:4
                    }
                ]
            },
            computed:{
                // 定义第一具体的totalprice计算机属性
                // 计算机属性就是一个函数
                totalprice:function(){
                    console.log('计算属性totalprice被调用了一次')
                    let sum = 0 //总价
                    for(let i=0; i<this.shop.length;i++){
                        sum = sum + this.shop[i].price * this.shop[i].count
                    }
                    // 计算属性最后必须把计算结果return返回
                    return sum
                }
            },
            methods:{
                total:function(){
                    console.log('方法total被调用了一次')
                    let sum = 0 //总价
                    for(let i=0; i<this.shop.length;i++){
                        sum = sum + this.shop[i].price * this.shop[i].count
                    }
                return sum
                }
            }
        })
    </script>
</body>
</html>

vue.js计算机属性01

热门文章

最新文章

相关课程

相关电子书

相关实验场景