day-03.计算属性computed(reduce函数的使用)、v-on参数、v-on修饰符、条件语句if

  1. 计算属性computed

当要显示的数据需要复杂的处理的时候,一般会选择使用computed计算属性.

computed与methods的区别?

计算属性会进行缓存,当数据没有改变时,如果进行多次使用时,计算属性只会调用一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">
        <h2>{{totalPrice}}</h2>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                books: [
                    {name: "数据结构", price: 12, count: 3},
                    {name: "汇编语言", price: 56, count: 3},
                    {name: "操作系统", price: 22, count: 3},
                ]
            },
            computed: {
                totalPrice() {
                    return this.books.reduce(function(total, cur) {
                        console.log(total, cur);
                        return cur.price * cur.count + total;
                    }, 0)
                }
            }
        })
    </script>
</body>
</html>
  1. v-on参数

当通过methods中定义方法,以供@click调用时,需要注意参数问题:
情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。
但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去。
情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
在这里插入图片描述
在这里插入图片描述

  1. v-on修饰符

在这里插入图片描述

  1. 条件语句if

当条件语句不成立时,浏览器根本不会对此标签以及它的子标签进行渲染,也就是说代码中根本不会出现相应的标签.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">
        <span v-if="score >= 90">优秀</span>
        <span v-else-if="score >= 60">良好</span>
        <span v-else>及格</span>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                score: 87
            }
        })
    </script>
</body>
</html>
展开阅读全文
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值