Vue教程0205-Class 与 Style 绑定

watchping

已于 2023-02-12 09:59:56 修改

阅读量303

点赞数

分类专栏：前端Vue教程 # Vue基础文章标签： javascript 前端 css vue.js

于 2023-02-11 16:17:22 首次发布

本文链接：https://blog.csdn.net/watchping/article/details/128984770

版权

前端Vue教程同时被 2 个专栏收录

10 篇文章 3 订阅

订阅专栏

Vue基础

8 篇文章 0 订阅

订阅专栏

Class 与 Style 绑定

1.绑定Style-对象语法
2.绑定Style-数组语法
3.绑定Class-对象语法
4.绑定Class-数组语法
5.手机号码样式显示代码的优化

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

1.绑定Style-对象语法

v-bind:style（简写:style）的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象，记得用引号括起来。

//HTML部分：
<div  :style="{top, left}" ></div>

//JS部分：
data: { 
          top: "0px",
          left: "0px",
      },

直接绑定到一个样式对象通常更好，这会让模板更清晰：

//HTML部分：
<div   :style="styleObject"  ></div>

//JS部分：
data: {          
          styleObject: {
              top: "0px",
              left: "0px",
          },
      },

通过一个对象变量，将元素的style属性当做一个对象来绑定，便于修改单个css属性。经过编译为字符串后，固定不变的style和动态的style的css属性最终合并为一个style属性。

案例
用上下左右4个按钮控制一个小方块的移动，参考代码如下：

<body>   
    <div id="app">
        <button @click="onUp">上</button>
        <button @click="onDown">下</button>
        <button @click="onLeft">左</button>
        <button @click="onRight">右</button>
        <div id="pop" style="position: fixed;
          width: 100px;
          height: 100px;
          background-color: pink;" :style="styleObject"></div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                styleObject: {
                    top: "200px",
                    left: "200px",
                },
                //这部分初始编译为: "top:200px; left:200px"s
                //可通过开发者工具查看页面元素
            },
            methods: {
                onUp() {  //上
                    var top = parseInt(this.styleObject.top);
                    top -= 20;
                    this.styleObject.top = top + "px";
                },
                onDown() { //下
                    var top = parseInt(this.styleObject.top);
                    top += 20;
                    this.styleObject.top = top + "px";
                },
                onLeft() {   //左
                    var left = parseInt(this.styleObject.left);
                    left -= 20;
                    this.styleObject.left = left + "px";
                },
                onRight() {  //右    
                    var left = parseInt(this.styleObject.left);
                    left += 20;
                    this.styleObject.left = left + "px";
                }
            },
        });
    </script>
</body>

2.绑定Style-数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

用上下左右4个按钮控制一个小方块的移动，也可以这样实现，注意两者的差异。参考代码如下：

<body>
    <div id="app">
    <button @click="onUp">上</button>
    <button @click="onDown">下</button>
    <button @click="onLeft">左</button>
    <button @click="onRight">右</button>
    <div :style="[baseStyles,styleObject]"></div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        baseStyles: {
          position: "fixed",
          width: "100px",
          height: "100px",
          "background-color": "pink", //右边属性名为什么要加引号？
        },
        styleObject: {
          top: "200px",
          left: "200px",
        },
      },
      methods: {
        onUp() { //上
          var top = parseInt(this.styleObject.top);
          top -= 20;
          this.styleObject.top = top + "px";
        },
        onDown() { //下
          var top = parseInt(this.styleObject.top);
          top += 20;
          this.styleObject.top = top + "px";
        },
        onLeft() { //左
          var left = parseInt(this.styleObject.left);
          left -= 20;
          this.styleObject.left = left + "px";
        },
        onRight() { //右
          var left = parseInt(this.styleObject.left);
          left += 20;
          this.styleObject.left = left + "px";
        }
      },
    });
  </script>
</body>

3.绑定Class-对象语法

多数样式的修改，都是同时修改多个css属性。批量修改一个元素的多个css属性，应该用class方式，如果用style绑定，每个css属性都要写出来，代码繁琐！

将class绑定到一个对象，定义对象的属性变量。

案例
手机号码校验显示信息样式，代码参考如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        /* 定义提示框的基础样式 */
        .message {
            display: inline-block;
            width: 160px;
            height: 24px;
            border: 1px solid #555;
            text-align: center;
            line-height: 24px;
            margin: 10px;
        }
        /* 定义提示框在验证通过时的样式 */
        .success {
            border: 1px solid green;
            background-color: lightgreen;
            color: green
        }
        /* 定义提示框在验证失败时的样式 */
        .msg-fail {
            border: 1px solid red;
            background-color: pink;
            color: red
        }
    </style>
</head>
<body>   
    <div id="app">
        <span>电话号码：{{cellphone}}</span>
        <!-- 提示框的样式会变化，部分class需要属性绑定;提示内容会变化，需要{{}}绑定 -->
        <span class="message" :class="{success,'msg-fail':hasErrr}">{{msg}}</span>
    </div>
    <script>
        const msgSuccess = "手机号格式正确！";
        const msgFail = "手机号格式错误！";
        var vm = new Vue({
            el: "#app",
            data: {
                cellphone: "13968021342", //输入的手机号
                msg: msgSuccess, //绑定提示信息的内容,默认是正确的                    
                //绑定提示信息的部分样式。
                success: true,
                hasErrr: false
            },
            computed: {
                isRight() {
                    //定义正则验证cellphone的内容
                    var reg = /^1[3-9]\d{9}$/;
                    //如果用正则验证cellphone的内容通过
                    return reg.test(this.cellphone);
                },
            },
            watch: {
                cellphone() {
                    if (this.isRight) {//手机号码验证有效                          
                        this.success = true;//更改为成功样式
                        this.hasErrr = false;
                        this.msg = msgSuccess; //修改span的提示信息内容
                    } else { //否则如果验证无效                        
                        this.success = false;
                        this.hasErrr = true;//更改为失败样式
                        this.msg = msgFail;//修改span的提示信息内容
                    }
                }
            },
        });
        //测试: 在F12->console->vm.cellphone=12968290224
        //测试: 在F12->console->vm.cellphone=15968290221
    </script>
</body>

定义了3个样式Class：message 、 success 、msg-fail（注意命名用过了短划线），以下关键代码要好好理解。

//HTML部分：
<span class="message" :class="{success,'msg-fail':hasErrr}">{{msg}}</span>

//JS部分：
data: {
           cellphone: "12968021342", //输入的手机号
           msg: msgSuccess, //绑定提示信息的内容,默认是正确的                    
           //绑定提示信息的部分样式。
           success: true,
           hasErrr: false
},

4.绑定Class-数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表。

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

<div class="active text-danger"></div>

手机号码校验显示信息样式的案例，也可以这样实现，注意两者的差异。参考代码如下：

<body>  
    <div id="app">
        <span>电话号码：{{cellphone}}</span>
        <!-- 提示框的样式会变化，部分class需要属性绑定;提示内容会变化，需要{{}}绑定 -->
        <span class="message" :class="[successClass,failClsss]">{{msg}}</span>
    </div>
    <script>
        const msgSuccess = "手机号格式正确！";
        const msgFail = "手机号格式错误！";
        var vm = new Vue({
            el: "#app",
            data: {
                cellphone: "13968021342", //输入的手机号
                msg: msgSuccess, //绑定提示信息的内容,默认是正确的                    
                //绑定提示信息的部分样式。
                successClass: "success",
                failClsss: "",  //"msg-fail"
            },
            computed: {
                isRight() {
                    //定义正则验证cellphone的内容
                    var reg = /^1[3-9]\d{9}$/;
                    //如果用正则验证cellphone的内容通过
                    return reg.test(this.cellphone);
                },
            },
            watch: {
                cellphone() {
                    if (this.isRight) {//手机号码验证有效                          
                        this.successClass = "success";//更改为成功样式
                        this.failClsss = "";
                        this.msg = msgSuccess; //修改span的提示信息内容
                    } else { //否则如果验证无效                        
                        this.successClass = "";
                        this.failClsss = "msg-fail";//更改为失败样式
                        this.msg = msgFail;//修改span的提示信息内容
                    }
                }
            },
        });
        //测试: 在F12->console->vm.cellphone=12968290224
        //测试: 在F12->console->vm.cellphone=15968290221
    </script>
</body>

注意上述代码中，粗体部分代码对数组语法的使用，和对象语法进行比较，区分二者的差异，实践中要养成自己的使用风格。

5.手机号码样式显示代码的优化

手机号码提示信息样式显示案例中，对业务逻辑可以进一步优化。其实显示的样式和内容，都和验证结果这一个数据有关！所有，用一个变量就可控制了。

优化后的代码参考如下：

<body>
    <div id="app">
        <span>电话号码：{{cellphone}}</span>
        <!-- 提示框的样式会变化，部分class需要属性绑定,提示内容会变化，需要{{}}绑定 -->
        <!--样式和内容，都和验证结果这一个数据有关！所有，其实只用一个变量就可控制了-->
        <span class="message" :class="isRight ?'success':'msg-fail'">{{isRight ?"手机号可用":"手机号格式错误！"}}</span>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {                
                cellphone: "12968290221", //输入的手机号                    
            },

            computed: {
                isRight() {
                    //定义正则验证cellphone的内容
                    var reg = /^1[3-9]\d{9}$/;
                    //如果用正则验证cellphone的内容通过
                    return reg.test(this.cellphone);
                },
            },
        });
        //测试: 在F12->console->vm.cellphone=12968290224
        //测试: 在F12->console->vm.cellphone=15968290221
    </script>
</body>

等学习了Vue对表单数据的双向绑定过后，将

<span>电话号码：{{cellphone}}</span>

改为：

<input v-model="cellphone"></input>

就能在输入时实时验证并显示手机号的验证结果了。

watchping

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue教程0205-Class 与 Style 绑定

Class 与 Style 绑定
复制链接

扫一扫

专栏目录