Vue计算属性侦听器和过滤器

柔光的暖阳◎ 2021-07-24 15:04 583阅读 0赞

# **一 计算属性和侦听器** #

*  计算属性：某些结果是基于之前数据实时计算出来的，我们可以利用计算属性来完成。
 *  侦听器：Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。

# **二 代码** #

<!DOCTYPE html>
    <html lang="en">
    
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    
    <body>
        <div id="app">
            
            <ul>
                <li>西游记； 价格：{
           {xyjPrice}}，数量：<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>
            //watch可以让我们监控一个值的变化。从而做出相应的反应。
            new Vue({
                el: "#app",
                data: {
                    xyjPrice: 99.98,
                    shzPrice: 98.00,
                    xyjNum: 1,
                    shzNum: 1,
                    msg: ""
                },
                computed: {
                    totalPrice() {
                        return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
                    }
                },
                watch: {
                    xyjNum(newVal, oldVal) {
                        if (newVal >= 3) {
                            this.msg = "库存超出限制";
                            this.xyjNum = 3
                        } else {
                            this.msg = "";
                        }
                    }
                },
            })
        </script>
    
    
    </body>
    </html>

# **三 效果** #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# **四 过滤器代码** #

<!DOCTYPE html>
    <html lang="en">
    
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    
    <body>
        
        <div id="app">
            <ul>
                <li v-for="user in userList">
                    {
          {user.id}} ==> {
          {user.name}} ==> {
          {user.gender == 1?"男":"女"}} ==>
                    {
          {user.gender | genderFilter}} ==> {
          {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: 'jacky', gender: 1 },
                        { id: 2, name: 'peter', gender: 0 }
                    ]
                },
                filters: {
                    // filters 定义局部过滤器，只可以在当前vue实例中使用
                    genderFilter(val) {
                        if (val == 1) {
                            return "男";
                        } else {
                            return "女";
                        }
                    }
                }
            })
        </script>
    </body>
    
    
    </html>

# **五 效果** #

![202010221922417.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/f98c121027c84d88a7d0a2b6d23e5f7a.png
[202010221922417.png]: /images/20210724/38bbf7c97ee347c480b30c1fd98bdeff.png