Vue中的计算属性，倾听器，过滤器

最新推荐文章于 2023-07-15 15:56:30 发布

Kiteyy

最新推荐文章于 2023-07-15 15:56:30 发布

阅读量208

点赞数

分类专栏：每天的学习笔记文章标签： vue 过滤器 java

本文链接：https://blog.csdn.net/weixin_46554504/article/details/107630809

版权

每天的学习笔记专栏收录该内容

63 篇文章 0 订阅

订阅专栏

Kite学习历程的第三十八天

1. 计算属性，倾听器

计算属性： computed用于计算data中的数据，而且可以更具获取的data中的数据，进行结果的实时更新
倾听器：watch类似于监听器，可以根据获取的新的newVel进行数据判断，从而输出新的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id = "app">
        <!-- 某些结果是基于之前的实时数据计算出来的，我们可以利用计算属性进行完成 -->
        <ul>
            <li>西游记：价格：{{xyjPrice}}， 数量：<input type="number" v-model="xyjNumber"></li>
            <li>水浒传：价格：{{shzPrice}}， 数量：<input type="number" v-model="shzNumber"></li>
            <li>总价：{{totalPrice}}</li>
            <li>库存状态：{{msg}}</li>
        </ul>

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                xyjPrice: 45.22,
                shzPrice: 88.22,
                xyjNumber: 1,
                shzNumber: 2,
                msg: "库存正常！"
            },
            // 添加计算属性: 可以实时的根据产品的数量，进行价格的实时更新
            computed: {
                totalPrice(){
                    return this.xyjNumber * this.xyjPrice + this.shzNumber * this.shzPrice;
                }
            },
            // watch 倾听器：可以让我们监控一个数值的变化，从而做出
            watch: {
                xyjNumber(newVel, oldVel){
                    if(newVel >= 3){
                        this.msg = "超出库存",
                        this.xyjNumber = 3
                    }else{
                        this.msg = "库存正常！"
                    }
                }
            },
        });
    </script> 
</body>
</html>

2. 过滤器

局部过滤器：在new vue中添加的 filters，有效范围只是el 属性绑定的标签，使用过程中会有一个vel值的传入，通过判断这个vel值，返回不同的结果，添加方法： {{以前属性值}} | {{过滤器名称}}
全局过滤器：

// 全局过滤器
        Vue.filter("gFilter", function (val) {
            if (val == 1) {
                return "全局 - 男";
            } else {
                return "全局 - 女";
            }
        });

全部代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
         过滤器常用于处理文本格式的操作，过滤器可以用在两个地方：
            1. 双花括号插值
            2. v-bind表达式
        -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ===> {{user.name}} ===> {{user.gender}} ===> {{user.gender | genderFilters}}  ===> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>


    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // 全局过滤器
        Vue.filter("gFilter", function (val) {
            if (val == 1) {
                return "全局 - 男";
            } else {
                return "全局 - 女";
            }
        });

        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: "Kitey", gender: 1 },
                    { id: 2, name: "Kitey2", gender: 0 }
                ]
            },
            // 局部过滤器
            filters: {
                genderFilters(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        });
    </script>
</body>
</html>