美文网首页
(Vue -03)Vue绑定样式 + 计算属性 + 侦听器+ 过

(Vue -03)Vue绑定样式 + 计算属性 + 侦听器+ 过

作者: Jinx要睡懒觉 | 来源:发表于2021-11-28 23:13 被阅读0次

    Vue官方文档
    首页-学习下拉栏-文档-教程 =>火速一键进入学习

    一、绑定样式

    1. class 绑定样式

    (1) 绑定一个对象,对象的属性名是类选择器名称,属性值返回 true,表示添加该选择器

    • ① 绑定单个样式:
        <style>
            .city li.active{
                background-color: orangered;
                color: white;
            }  
        </style>
    
        <ul class="city">
             <!-- index===activeIndex判断结果为true时,添加active选择器 -->
             <li :class="{active:index===activeIndex}" @click="activeIndex=index"
                 v-for="(item,index) in citys" :key="index">{{item}}</li>
        </ul>
    
        <script>
            new Vue({
                el:'#app',
                data:{
                    activeIndex:0,
                    citys:['北京','南京','天津','东京'],
                }
            })
        </script>
    
    • ② 绑定多个样式:
        <style>
            .box1{
                width: 200px;
                height: 100px;
                padding: 10px;
                margin-top: 10px;
            }
            .bgColor{
                background-color: lightblue;
            }
            .fontColor{
                color: white;
            }
            .border{
                border: 2px solid red;
            }
        </style>
    
        <button @click="bgColor=true">添加背景颜色</button>
        <button @click="fontColor=true">添加文本颜色</button>
        <button @click="border=true">添加容器边框</button>
        <!-- 绑定class,对象的属性名就是指定类的名称,属性值是true和false -->
        <div class="box1" :class="{bgColor:bgColor,fontColor:fontColor,border:border}">好好学习Vue</div>
    

    绑定的对象的,属性名 bgColor 是 css 里的类选择器的名字
    属性值 bgColor 是数据里设置的属性名┗|`O′|┛ 嗷~~
    初始化设定了是false,然后点击的时候呢给它变成true,添加成功啦

        <script>
            new Vue({
                el:'#app',
                data:{
                    activeIndex:0,
                    citys:['北京','南京','天津','东京'],
                    bgColor:false,      //是否添加背景颜色
                    fontColor:false,    //是否添加文本颜色
                    border:false,       //是否显示边框
                }
            })
        </script>
    

    (2) 绑定一个三元表达式
    三元表达式语法结构: 条件表达式 ? 表达式1 : 表达式2
    如果条件表达式结果为true,则返回 表达式1 ;如果为false ,则返回 表达式2 的值。

    • ① 绑定单个样式:
         <ul class="city">
             <li :class="index===activeIndex?'active':''" @click="activeIndex=index"
              v-for="(item,index) in citys" :key="index">{{item}}</li>
         </ul>
    

    绑定的三元表达式条件为true时,添加选择器;条件为false则不添加。

    • ② 配合数组,绑定多个样式:
        <button @click="bgColor=true">添加背景颜色</button>
        <button @click="fontColor=true">添加文本颜色</button>
        <button @click="border=true">添加容器边框</button>
        <div class="box1" :class="[bgColor?'bgColor':'',fontColor?'fontColor':'',border?'border':'']">好好学习Vue</div>
    
        <script>
            new Vue({
                el:'#app',
                data:{
                    activeIndex:0,
                    citys:['北京','南京','天津','东京'],
                    bgColor:false,      //是否添加背景颜色
                    fontColor:false,    //是否添加文本颜色
                    border:false,       //是否显示边框
                }
            })
        </script>
    

    2. style 绑定样式

    :style 绑定样式时,对象的属性名称是原生CSS的属性名严格名称(要使用小驼峰命名法),属性值是具体的样式值,要采用小驼峰命名规范。

            <!-- :style绑定样式时,对象的属性名称是css样式的名称(要使用小驼峰命名法),属性值是具体的样式值 -->
            <div class="box1" :style="{backgroundColor:bgc,color:fc}">好好学习Vue
                <p>背景色:<input type="text" v-model="bgc"></p>
                <p>文本色:<input type="text" v-model="fc"></p>
            </div>
    
        <script>
            new Vue({
                el:'#app',
                data:{
                    bgc:'orangered',   //定义背景颜色
                    fc:'white'         //定义文本颜色
                }
            })
        </script>
    

    二、计算属性 computed

    Vue官方的-计算属性

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

    <div id="example">
       {{ message.split('').reverse().join('') }}
    </div>
    

    在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。
    所以,对于任何复杂逻辑,你都应当使用计算属性

    好耶~让我们开始吧┗|`O′|┛ 嗷~~

        <div id="app">
            <p>姓:<input type="text" v-model="firstName"></p>
            <p>名:<input type="text" v-model="lastName"></p>
            <p>姓名:<input type="text" :value="firstName+ '.'+ lastName" ></p>
        </div>
    
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    firstName: '张',
                    lastName: '杰',
                }
            })
        </script>
    

    此时页面效果为:

    姓名栏 中的value值会随着 姓栏 和 名栏 的输入而改变,但是需要在 姓名栏 中拼接。
    有两种办法可以解决:

    (1) 在methods里写一个方法

    通过这个方法返回this.firstName+ '.'+ this.lastName,然后再去调用这个方法。如下:

        <p>姓名:<input type="text" :value="fullName()" ></p>
    
        <script>
            new Vue({
                el: '#app',
                data: {
                    firstName: '张',
                    lastName: '杰',
                },
                methods: {
                    fullName(){
                        return this.firstName+ '.'+ this.lastName
                    }
                },
            })
        </script>
    

    (2) Vue推出的 计算属性 computed

    结果是由两个属性拼接而来,说明 结果是由这两个属性计算而来。

    在data同级,加一个computed选项,用于定义计算属性,里面定义的是方法;计算属性本质上是方法,在模板中当成属性去使用。如下:

        <p>姓名:<input type="text" :value="fullName" ></p>
    
       <script>
            new Vue({
                el: '#app',
                data: {
                    firstName: '张',
                    lastName: '杰',
                },
                methods: {
                },
                //用于定义计算属性
                computed:{
                    //在这里面定义的是方法
                    fullName(){
                        return this.firstName+ '.'+ this.lastName
                    }
                }
            })
        </script>
    

    此时把 :value 改成 v-model,并不能实现双向绑定,且会报错。

    注意: 计算属性默认情况下只能读,不能改。
    如果想要让计算属性既能读,又能改,那就要换一种形式啦~

    ① 在computed里定义完整结构的计算属性,然后使用v-model进行绑定计算属性。
    ② get方法,用于返回计算属性的值。
    ③ set方法,用于修改计算属性的值,记得传值。

    如下:

        <p>姓名:<input type="text" v-model="fullName" ></p>
    
        <script>
            new Vue({
                el: '#app',
                data: {
                    firstName: '张',
                    lastName: '杰',
                },
                methods: {
                },
                //用于定义计算属性
                computed:{
                    // 定义完整结构的计算属性
                    fullName:{
                        //get方法,用于返回计算属性的值
                        get(){
                            return this.firstName+ '.'+ this.lastName
                        },
                        //set方法,用于修改计算属性的值,记得传值
                        set(val){
                            let arr = val.split('.')
                            this.firstName = arr[0]
                            this.lastName = arr[1]
                        }
                    }
                }
            })
        </script>
    

    计算属性的优势是: 有缓存 。 当页面数据发生变化时,所有的方法都要重新执行。当计算属性用到的数据发生变化时,计算属性才会执行。

    比如计算商品总价时,最好是用计算属性,它有缓存嘛


    三、数据侦听器 |监听器 watch

    1. 普通侦听数据

    根据属性的名称,定义一个方法,用于侦听该属性的变化。
    当属性的值发生变化时,该方法就会执行。

    这个方法,有两个参数,第一个参数是最新值,第二参数是旧值。

        <div id="app">
            <p>姓名:<input type="text" v-model="name"></p>
            <p>年龄:<input type="text" v-model="age">{{MyAge}}</p>
        </div>
    
        <script>
            new Vue({
                el:'#app',
                data:{
                    name:'张三',
                    age:20
                },
                //数据侦听器
                watch:{
                    name(nval,oval){
                        //比如:当name属性值发生变化时,重新发送ajax请求获取新的数据
                        console.log(nval,oval);
                    },
                    age(nval,oval){
                        console.log(nval,oval);
                    },
                },    
            })
        </script>
    

    2. 侦听对象,需要开启深度监视

    如果要实现深度侦听对象的变化(也就是对象具体属性的变化),就需要使用完整的写法,定义一个对象。

    deep 属性开启深度监视,值为truefalse
    immediate 属性设定页面加载完成时,先运行一次,值为truefalse
                  (注意:这种情况下,旧值是undefined
    handler 定义监视的函数

    注意:开启深度监视后,旧值已经没有意义,因为对象是引用类型,对象的属性值已经改了,就没有旧的属性值。

       <div id="app">
            <p>姓名:<input type="text" v-model="name"></p>
            <p>年龄:<input type="text" v-model="age">{{MyAge}}</p>
            <hr>
    
            <h2>学生信息</h2>
            <button @click="resetStudent">修改学生对象</button>
            <p>姓名:<input v-model="student.name" ></p>
            <p>年龄:<input v-model="student.age" ></p>
            <p>性别:<input v-model="student.sex" ></p>
        </div>
    
     <script>
            new Vue({
                el:'#app',
                data:{
                    name:'张三',
                    age:20,
                    student:{
                        name:'李四',
                        age:20,
                        sex:'女'
                    }
                },
                methods: {
                    resetStudent(){
                        this.student = {
                            name:'王五',
                            age:22,
                            sex:'男'
                        }
                    }
                },
                //数据侦听器
                watch:{
                    name(nval,oval){
                        console.log(nval,oval);
                    },
                    student(nval,oval){
                        console.log(nval,oval);
                    },
                    // 侦听对象,需要开启深度监视
                    student:{
                        deep:true,
                        immediate:true,
                        handler(nval,oval){
                            console.log(nval,oval);
                        }
                    }
                },
                //计算属性,也有监视的能力
                computed:{
                    MyAge(){
                        // 当前计算机属性里面用到数据发生变化时,会重新执行计算属性
                        // 只是计算属性必须要在模板中使用
                        console.log(this.age);
                        return this.age
                    }
                }
            })
        </script>
    

    3. 计算属性,也有监视的能力

    当前计算属性里面用到数据发生变化时,会重新执行计算属性,
    只是计算属性必须要在模板中使用(方法要在页面中用一下)

        <div id="app">
            <p>姓名:<input type="text" v-model="name"></p>
            <p>年龄:<input type="text" v-model="age">{{MyAge}}</p>
        </div>
    
        <script>
            new Vue({
                el:'#app',
                data:{
                    name:'张三',
                    age:20
                },
                //计算属性,也有监视的能力
                computed:{
                    MyAge(){
                        // 当前计算机属性里面用到数据发生变化时,会重新执行计算属性
                        // 只是计算属性必须要在模板中使用
                        console.log(this.age);
                        return this.age
                    }
                }
            })
        </script>
    

    四、过滤器

    Vue官方的-过滤器
    过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号 | 指示。

    1. 局部过滤器

    局部过滤器(Vue实例内部定义的过滤器),只有当前Vue实例可以访问。
    filters中定义过滤器。
    通过 管道符 | 调用过滤器,其实就是调用那个方法,将值传进去,再返回新的值。
    过滤器可以链式调用,就是之前已经过滤完成的结果,继续传给下一个过滤器,注意顺序。

        <div id="app">
            <p>商品名称:{{goods.name}}</p>
            <p>商品价格:{{goods.price | toFixed2}}</p>
            <!-- 通过管道符| 调用过滤器,其实就是调用那个方法,将值传进去,再返回新的值 -->
            <p>商品价格(人民币):{{goods.price | toFixed2 | toRMB}}
                <input type="text" :value="goods.price | toFixed2">
            </p>
            <p>商品价格(美元):{{goods.price | toFixed2 | toUS}}</p>
        </div>
    
    
        <script>
            Vue.config.productionTip = false
            new Vue({
                el:'#app',
                data:{
                    goods:{
                        name:'小米手机',
                        price:1999.22222
                    }
                },
                // 定义方法,过滤商品的价格
                methods: {
                    toFixed2(val){
                        return val.toFixed(2)
                    }
                },
                // 定义一个计算属性
                computed:{
                    myGoods(){
                        let goods = {
                            name:this.goods.name,
                            price:this.goods.price.toFixed(2)
                        }
                        return goods
                    }
                },
                // 定义过滤器
                filters:{
                    // 过滤在模板中通过管道符 | 的方式来调用 
                    toFixed2(val){
                        return val.toFixed(2)
                    },
                    //返回人民币数据
                    toRMB(val){
                        return '¥'+ val
                    },
                    //返回美元数据
                    toUS(val){
                        return '$'+ (val/6.5).toFixed(2)
                    }
                }
            })
        </script>
    

    2. 全局过滤器

    在创建 Vue 实例之前定义的全局过滤器,所有的Vue实例都可以访问。
    如果局部过滤器和全局过滤器冲突,优先级更高的是局部过滤器。
    一般将全局过滤器,会单独创建一个filter文件夹存放┗|`O′|┛ 嗷~~,
    记得在html文件里引入。

        <!-- 引入外部js,里面定义的是全局过滤器 -->
        <script src="./filter/index.js"></script>
    
        <!-- app 和 app2容器都可以使用全局过滤器toFixed2、toRMB -->
        <div id="app">
            <p>商品名称:{{goods.name}}</p>
            <p>商品价格:{{goods.price | toFixed2 | toRMB}}</p>
        </div>
        <div id="app2">
            <p>商品名称:{{goods.name}}</p>
            <p>商品价格:{{goods.price | toFixed2 | toRMB}}</p>
        </div>
    
    
       Vue.filter("toFixed2", function (val) {
          return val.toFixed(2);
       });
       Vue.filter('toRMB', function(val){
          return '¥'+ val
       })
       new Vue({
           el:'#app',
           data:{
               goods:{
                   name:'小米手机',
                   price:1999.22222
               }
           }
       })
       new Vue({
           el:'#app2',
           data:{
               goods:{
                   name:'华为手机',
                   price:2999.33333
               }
           }
       })
    
    

    相关文章

      网友评论

          本文标题:(Vue -03)Vue绑定样式 + 计算属性 + 侦听器+ 过

          本文链接:https://www.haomeiwen.com/subject/cmdfxrtx.html