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

最新推荐文章于 2023-12-17 08:00:00 发布

InTheWind1115

最新推荐文章于 2023-12-17 08:00:00 发布

阅读量579

点赞数

分类专栏： Vue框架

本文链接：https://blog.csdn.net/weixin_44927585/article/details/107051031

版权

Vue框架专栏收录该内容

5 篇文章 0 订阅

订阅专栏

计算属性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>

v-on参数

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

v-on修饰符

条件语句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>

InTheWind1115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day-03.计算属性computed(reduce函数的使用)、v-on参数、v-on修饰符、条件语句if

计算属性computed当要显示的数据需要复杂的处理的时候，一般会选择使用computed计算属性.computed与methods的区别？计算属性会进行缓存，当数据没有改变时，如果进行多次使用时，计算属性只会调用一次。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d..
复制链接

扫一扫