Vue的样式绑定 style和class用数组和对象的方式

最新推荐文章于 2024-09-20 11:35:39 发布

weixin_44346827

最新推荐文章于 2024-09-20 11:35:39 发布

阅读量1.8k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44346827/article/details/90234009

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <title>Vue的样式绑定</title>
   <meta charset="utf-8">
   <script type="text/javascript" src="js/vue.js"></script>
   <style type="text/css">
       .action{
           color: red;
       }
       .action-one{
           color: yellow;
       }
   </style>
</head>
<body>
   <div id="app">
       <div
       :style="[styleObj,{fontSize:'6px'}]" @click="handDivClick"
       >
           hello word!!!
       </div>
       
       
   </div>
</body>
<script type="text/javascript">
    //vue点击颜色变化一般就是js，那么我们就是做一个js绑定对象；{}
    //:class="{action:isaction}" 属性action,
    //1.一种方法就是class对象绑定；
    //2.第二种方法就是class绑定一个数组；里面就是变量值；
    //3.第三种方法就是通过style绑定数组的形式；和变量的形式；
    var app=new Vue({
        el:"#app",
        data:{
            isaction:false,
            action:"",
            actionOne:"action-one",
            styleObj:{
                color:"red"
            }

        },
        methods:{
            handDivClick:function(){
                /*this.isaction=!this.isaction;
                console.log(123);*/
                /*this.action="action";*/
                //这么判断呢？
                /*if (this.action==="") {
                    this.action="action";
                } else {
                    this.action="";
                }*/
                //用一个三元表达；
                this.styleObj.color=this.styleObj.color==="red"?"yellow":"red";

            }
        }

    })

</script>
</html>