Vue.js(4)：动态改变样式

最新推荐文章于 2024-04-18 15:01:57 发布

dawn

最新推荐文章于 2024-04-18 15:01:57 发布

阅读量984

点赞数 3

分类专栏： Vue.js + ElementUI 文章标签： javascript html css

本文链接：https://blog.csdn.net/dawn0718/article/details/120660327

版权

Vue.js + ElementUI 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

　　在设置好样式后，可以通过代码来动态改变页面中的元素显示样式。

　　一个两数相除的例子，在除数输入了0则为红色报警大字体加粗显示，如果结果大于等于0则为蓝色，小于0则为绿色显示。

　　就像下面的样式：

　　第一种实现代码：（普通方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js语法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .normal {color: black;font-size: 19px;}
        .red{color: red;}
        .green{color: green;}
        .blue{color: blue;}
        .bold{font-weight: bold;}
    </style>
</head>
<body>
    <div id="demo">
        <div>
            请输入被除数：<input type="text" v-model="add1"/>
        </div>
        <div>
            请输入除数：<input type="text" v-model="add2"/>
        </div>
        <div class="normal" v-bind:class="{bold:isBold,red:isRed,blue:isBlue,green:isGreen}">结果：{{divResult()}}</div>
    </div>

    <script>
        //声明数据对象
        const vueDataObj={
            add1:1,
            add2:1,
            isBold:false,
            isRed:false,
            isGreen:false,
            isBlue:false,
        };
        var methods={
            divResult(){
                this.isBlue=false;
                this.isRed=false;
                this.isGreen=false;
                this.isBold=false;
                if(this.add2==0){
                    this.isBold=true;
                    this.isRed=true;
                    return '除数不能为0';
                }else{
                    var result=this.add1/this.add2;
                    if(result>=0){
                        this.isBlue=true;
                    }else{
                        this.isGreen=true;
                    }
                    return result;
                }
            }
        };
        //创建vue对象
        const vueApp=new Vue({
            el:'#demo',
            data:vueDataObj,
            methods,
            computed:{}
        });
    </script>
</body>
</html>

　　在上面的代码中，设置样式即<div class="normal" v-bind:class="{bold:isBold,red:isRed,blue:isBlue,green:isGreen}">这一行，是采用对象方式，即属性名和属性值，多组的话就中间加","，然后在程序里改变属性值，Vue会实时进行翻译成最后的HTML样式。

　　第二种实现代码：（通过计算属性来完成）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue动态改变样式class_2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .normal {color: black;font-size: 15px;}
        .red{color: red;}
        .green{color: green;}
        .blue{color: blue;}
        .bold{font-weight: bold;}
    </style>
</head>
<body>
    <div id="demo" class="normal" >
        <div>
            请输入被除数：<input type="text" v-model="add1"/>
        </div>
        <div>
            　请输入除数：<input type="text" v-model="add2"/>
        </div>
        <div v-bind:class="isClass">
            两数相除结果：{{divResult}}
        </div>
    </div>

    <script>
        //声明数据对象
        const vueDataObj={
            add1:1,
            add2:2,
        };
        //创建vue对象
        const vueApp=new Vue({
            el:'#demo',
            data:vueDataObj,
            methods:{},
            computed:{
                divResult:{
                    get(){
                        if (this.add2==0){
                            return '除数不能为0！';
                        }else{
                            var result=parseInt(this.add1)/parseInt(this.add2);
                            return result;
                        }                       
                    },
                },
                isClass(){
                    if(this.add2==0){ return { bold:true,red:true,} }
                    else{ 
                        if(this.divResult2>=0){ return { blue:true,} }
                        else{ return { green:true,} }
                        }
                    }
                }
        });
    </script>
</body>
</html>

　　在上面的代码中，样式和计算结果分别为两个计算属性，分别进行计算。

　　在上面的例子中，将样式定义为属性，通过方法也可以，稍微有点变化，感觉麻烦一点。

　　第三种实现方式：（通过封装成一个数据对象进行操作）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue动态改变样式class_2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .normal {color: black;font-size: 15px;}
        .red{color: red;}
        .green{color: green;}
        .blue{color: blue;}
        .bold{font-weight: bold;}
    </style>
</head>
<body>
    <div id="demo" class="normal" >
        <div>
            请输入被除数：<input type="text" v-model="add1"/>
        </div>
        <div>
            　请输入除数：<input type="text" v-model="add2"/>
        </div>
        <div v-bind:class="isClass">
            两数相除结果：{{divResult()}}
        </div>
    </div>

    <script>
        //声明数据对象
        const vueDataObj={
            add1:1,
            add2:2,
            isClass:{
                bold:false,
                red:false,
                blue:false,
                green:false
            },
        };
        //创建vue对象
        const vueApp=new Vue({
            el:'#demo',
            data:vueDataObj,
            methods:{
                divResult(){
                    this.isClass.blue=false;
                    this.isClass.red=false;
                    this.isClass.green=false;
                    this.isClass.bold=false;
                    if(this.add2==0){
                        this.isClass.bold=true;
                        this.isClass.red=true;
                        return '除数不能为0';
                    }else{
                        var result=this.add1/this.add2;
                        if(result>=0){
                            this.isClass.blue=true;
                        }else{
                            this.isClass.green=true;
                        }
                        return result;
                    }
                }
            },
            computed:{}   
        });
    </script>
</body>
</html>

　　第四种实现方式：（可以通过数组来操作）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue动态改变样式class_3</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .normal {color: black;font-size: 15px;}
        .red{color: red;}
        .green{color: green;}
        .blue{color: blue;}
        .bold{font-weight: bold;}
    </style>
</head>
<body>
    <div id="demo" class="normal">
        <div>
            请输入被除数：<input type="text" v-model="add1"/>
        </div>
        <div>
            　请输入除数：<input type="text" v-model="add2"/>
        </div>
        <div v-bind:class="[isBold,isRed,isBlue,isGreen]">
            两数相除结果：{{divResult2}}
        </div>
    </div>

    <script>
        //声明数据对象
        const vueDataObj={
            add1:1,
            add2:1,
            isBold:'',
            isRed:'',
            isGreen:'',
            isBlue:''
        };
        //创建vue对象
        const vueApp=new Vue({
            el:'#demo',
            data:vueDataObj,
            methods:{},
            computed:{
                divResult2:{
                    get(){
                        this.isBold='';
                        this.isRed='';
                        this.isGreen='';
                        this.isBlue='';
                        if (this.add2==0){
                            this.isRed='red';
                            this.isBold='bold';
                            return '除数不能为0！';
                        }else{
                            var result=this.add1/this.add2;
                            if (result>=0){
                                this.isBlue='blue';
                            }else{
                                this.isGreen='green';
                            }    
                            return result;
                        }                       
                    },
                },
            }
        });
    </script>
</body>
</html>

　　对象方式就是样式为真或者假，数组方式直接就是样式名，无论哪种方式，最终vue都翻译成Html的样式设置。

　　style样式的绑定也与上面相同，处理方式也和上面差不多。

　　最后的一个例子稍作修改即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue动态改变样式style</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .normal {color: black;font-size: 15px;}
        .red{color: red;}
        .green{color: green;}
        .blue{color: blue;}
        .bold{font-weight: bold;}
    </style>
</head>
<body>
    <div id="demo" class="normal">
        <div>
            请输入被除数：<input type="text" v-model="add1"/>
        </div>
        <div>
            请输入除数：<input type="text" v-model="add2"/>
        </div>
        <!-- <div class="normal" v-bind:class="{bold:isBold,red:isRed,blue:isBlue,green:isGreen}"> -->
        <!-- <div class="normal" v-bind:class="isClass"> -->
        <!-- <div class="normal" v-bind:class="[isBold,isRed,isBlue,isGreen]"> -->
        <div v-bind:style="isClass">
            结果：{{divResult}}
        </div>
    </div>

    <script>
        //声明数据对象
        const vueDataObj={
            add1:1,
            add2:1,
        };
        //创建vue对象
        const vueApp=new Vue({
            el:'#demo',
            data:vueDataObj,
            methods:{},
            computed:{
                divResult:{
                    get(){
                        if (this.add2==0){
                            return '除数不能为0！';
                        }else{
                            var result=this.add1/this.add2;
                            return result;
                        }                       
                    },
                },
                isClass(){
                    if(this.add2==0){ return { color:'red',bold:'bold',} }
                    else{ 
                        if(this.divResult>=0){ return { color:'blue',} }
                        else{ return { color:'green',} }
                        }
                    }
                }
        });
    </script>
</body>
</html>

dawn

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue.js(4)：动态改变样式

　　在设置好样式后，可以通过代码来动态改变页面中的元素显示样式。　　一个两数相除的例子，在除数输入了0则为红色报警大字体加粗显示，如果结果大于等于0则为蓝色，小于0则为绿色显示。　　就像下面的样式：　　第一种实现代码：（普通方式）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib.
复制链接

扫一扫