vue.js计算机属性01

简介: 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>
相关文章
|
22天前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
15 1
|
25天前
|
XML JavaScript 前端开发
如何在JavaScript中设置多个样式属性?
【6月更文挑战第29天】如何在JavaScript中设置多个样式属性?
45 3
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的计算机知识竞赛网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的计算机知识竞赛网站附带文章源码部署视频讲解等
9 0
|
18天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
14 0
|
19天前
|
JavaScript
vue 批量绑定属性(你可能没这样用过 v-bind)
vue 批量绑定属性(你可能没这样用过 v-bind)
21 0
|
20天前
|
JavaScript
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
16 0
|
21天前
|
缓存 JavaScript C++
|
22天前
|
JavaScript
js 排序—— sort() 对普通数组、对象数组(单属性/多属性)排序
js 排序—— sort() 对普通数组、对象数组(单属性/多属性)排序
12 0
|
22天前
|
JavaScript
Vue computed自动计算对象中的属性
Vue computed自动计算对象中的属性
15 0