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

Kite学习历程的第三十八天

目录

  • Kite学习历程的第三十八天
    • 1. 计算属性,倾听器
    • 2. 过滤器

1. 计算属性,倾听器

  1. 计算属性: computed用于计算data中的数据,而且可以更具获取的data中的数据,进行结果的实时更新
  2. 倾听器: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. 过滤器

  1. 局部过滤器: 在new vue中添加的 filters, 有效范围只是el 属性绑定的标签, 使用过程中 会有一个vel值的传入,通过判断这个vel值,返回不同的结果, 添加方法: {{以前属性值}} | {{过滤器名称}}
  2. 全局过滤器:
// 全局过滤器
        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>

你可能感兴趣的:(每天的学习笔记,vue,过滤器,java)