VUE计算属性与侦听器，过滤器

最新推荐文章于 2024-08-09 11:20:59 发布

Java小生不才

最新推荐文章于 2024-08-09 11:20:59 发布

阅读量201

点赞数

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

本文链接：https://blog.csdn.net/qq_41596346/article/details/121088945

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.计算属性computed

某些结果是基于之前数据实时计算出来的，我们可以利用计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>computed计算器和watch监听器</title>
</head>
<body>
    <div id="app">
        <ul>
            <li>西游记: 价格:{{priceA}} 数量:<input type="number" v-model="numA"></li>
            <li>水浒传: 价格:{{priceB}} 数量:<input type="number" v-model="numB"></li>
            <li>总金额:{{totalPrice}}</li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
               numA:1,
               numB:2,
               priceA:100,
               priceB:200
            },
            //computed计算器
            computed: {
                totalPrice(){
                    return this.priceA*this.numA+this.priceB*this.numB
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

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>computed计算器和watch监听器</title>
</head>
<body>
    <div id="app">
        <ul>
            <li>西游记: 价格:{{priceA}} 数量:<input type="number" v-model="numA"></li>
            <li>水浒传: 价格:{{priceB}} 数量:<input type="number" v-model="numB"></li>
            <li>总金额:{{totalPrice}}</li>
            {{msg}} 
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
               numA:1,
               numB:2,
               priceA:100,
               priceB:200,
               msg:""
            },
            //computed计算器
            computed: {
                totalPrice(){
                    return this.priceA*this.numA+this.priceB*this.numB
                }
            },
            //watch监听器
            watch: {
                numA:function(newVal,oldVal){
                    if(newVal>=3){
                        this.msg="亲,库存不足,小店快马加鞭补货中!";
                        this.numA=3
                    }else{
                        this.msg="";
                    }
                }
            }
        })
    </script>
    
</body>
</html>

在这里插入图片描述

3.过滤器filters

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持 API 响应的干净，并在前端处理数据的格式，过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind
表达式

3.1.局部过滤器

注册在当前 vue 实例中，只有当前实例能用

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

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

<body>
    <div id="app">
        <ul>
            <li v-for="user in users" :key="user.id">  
                {{user.id}}---{{user.name}}----{{user.sex == 1 ? "男" : "女"}}---{{user.sex | sexFilter}} </li>
        </ul>
    </div>
    
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                users: [
                    { id: 1, name: "小生不才", sex: 1 },
                    { id: 2, name: "柳岩", sex: 0 },
                    { id: 3, name: "刘亦菲", sex: 0 },
                    { id: 4, name: "刘太阳", sex: 0 }
                ]
            },
            //filters过滤器
            filters: {
                //sexFilter局部过滤器
                sexFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

3.2.全局过滤器

在创建 Vue 实例之前全局定义过滤器

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

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

<body>
    <div id="app">
        <ul>
            <li v-for="user in users" :key="user.id">  
                {{user.id}}---{{user.name}}----{{user.sex == 1 ? "男" : "女"}}===>{{user.sex | sexFilter}} ---{{user.sex | sFilter}}</li>
        </ul>
       
    </div>
    
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //sFilter 全局过滤器
        Vue.filter("sFilter", function (val) {
            if (val == 1) {
                return "man";
            } else {
                return "woman";
            }
        })

        new Vue({
            el: "#app",
            data: {
                users: [
                    { id: 1, name: "小生不才", sex: 1 },
                    { id: 2, name: "柳岩", sex: 0 },
                    { id: 3, name: "刘亦菲", sex: 0 },
                    { id: 4, name: "刘太阳", sex: 0 }
                ]
            },
            //filters过滤器
            filters: {
                //sexFilter局部过滤器
                sexFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

Java小生不才

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE计算属性与侦听器，过滤器

1.计算属性computed某些结果是基于之前数据实时计算出来的，我们可以利用计算属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>computed计算器和watch监听器&l
复制链接

扫一扫

专栏目录