【Vue】Vue扫盲（三）计算属性和监听器

执键行天涯

已于 2024-10-10 15:27:08 修改

阅读量715

点赞数 28

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2024-10-10 15:22:04 首次发布

本文链接：https://blog.csdn.net/qq_39666711/article/details/142821509

版权

VUE 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

【Vue】Vue扫盲（一）事件标签、事件修饰符：@click.prevent @click.stop @click.stop.prevent、按键修饰符、及常用指令

【Vue】Vue扫盲（二）指令：v-for 、v-if、v-else-if、v-else、v-show

文章目录

1、计算属性（computed）

某些结果是基于页面上之前的数据实时计算出来的，我们可以利用计算属性。来完成
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性和监听器</title>
</head>
<body>
    <div id="app" style="border: 1px red; margin: auto;">
        <ul>
            <li>西游记，价格{{xyjPrive}}，数量:<input type="number" v-model="xyjNum"/></li>
            <li>水浒传，价格{{shzPrice}}，数量:<input type="number" v-model="shzNum"/></li>
            <li>总价{{totalPrice}}</li>

            
        </ul>

    </div>


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

       let vm = new Vue({
            el:"#app",
            data:{
                xyjPrive:99.98,
                shzPrice:98,
                xyjNum:1,
                shzNum:1
                
            },
            methods: {
                 
            },
            computed:{
                totalPrice(){
                    return this.xyjPrive*this.xyjNum+this.shzPrice*this.shzNum;
                }
            }
        })

    </script>
</body>
</html>

结果1：
在这里插入图片描述
结果2：

2、监听器 watch

watch 可以让我们监控一个值的变化。从而做出相应的反应。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性和监听器</title>
</head>
<body>
    <div id="app" style="border: 1px red; margin: auto;">
        <ul>
            <li>西游记，价格{{xyjPrive}}，数量:<input type="number" v-model="xyjNum"/></li>
            <li>水浒传，价格{{shzPrice}}，数量:<input type="number" v-model="shzNum"/></li>
            <li>总价{{totalPrice}}</li>
            提示信息：{{msg}}
            
        </ul>

    </div>


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

       let vm = new Vue({
            el:"#app",
            data:{
                xyjPrive:99.98,
                shzPrice:98,
                xyjNum:1,
                shzNum:1,
                msg:""
                
            },
            methods: {
                 
            },
            computed:{
                totalPrice(){
                    return this.xyjPrive*this.xyjNum+this.shzPrice*this.shzNum;
                }
            },
            watch:{ //watch可以让我们监控一个值的变化，从而做出反应
                xyjNum:function(newVal,oldVal){ //同等写法：xyjNum(newVal,oldVal)
                    if(newVal>=3){
                        this.msg="西游记库存没有更多了";
                         this.xyjNum=3;
                    }else{
                        this.msg="";
                    }
                }
            }
        })

    </script>
</body>
</html>

效果1：
西游记的数量不能超过3，如果超过3，则无法在增加，一直是三。并给出提示库存超出
在这里插入图片描述

在这里插入图片描述

效果2：
在这里插入图片描述

3、过滤器（局部过滤器、全局过滤器）

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的
情况下，过滤器都是有用的，比如尽可能保持 API 响应的干净，并在前端处理数据的格式。

示例：展示用户列表性别显示男女

下面的 genderFilter 一个局部过滤器，只能在当前的Vue监听的视图中使用
gFilter 是一个全局过滤器，在全局都可以用

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

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

<body>

    <!-- 过滤器通常用来处理文本格式化的操作，过滤器可以用在两个地方，双花括号插值和v-bind表达式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList" :key="user.id">
                {{user.id}}==>{{user.name}}==>{{user.gender}}==>
                {{user.gender ==1?"男":"女"}} <!-- 简单的可以通过三目运算符来完成转换，如果复杂的则通过过滤器进行转化 -->
                ====使用局部过滤器后的结果：{{user.gender|genderFilter}}
                ====》 使用全局过滤器后的结果：{{user.gender|gFilter}}
            </li> <!-- 上面的{{user.gender|genderFilter}} 中的 | 是管道符的作用 ，是把前面user.gender的值传给了 后面的genderFliter中进行处理，
            并返回一个值-->
        </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: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            methods: {

            },
            filters: {
                //由于这个过滤器写在单个的Vue实例中，所以叫做局部过滤器，我们还有全局过滤器一说
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })

    </script>
</body>

</html>