挑战百日学习计划(Vue)_v-bind:class

最新推荐文章于 2024-05-31 11:03:33 发布

zkelm.com

最新推荐文章于 2024-05-31 11:03:33 发布

阅读量222

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/zkelm/article/details/105781628

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

样式绑定分两种：

v-bind：class =“”
v-bind：style=“”
表达式的结果可以是数组也可以是对象，但是都是vue中的变量
直接定义class的名字则不生效

一：对象赋值

<html>
<head>
<style>
.active{
   width:100px;
   height:100px;
   backgroud:Red;
}
</style>
</head>
<body>
  <div id="app">
       <div v-bind:class="{active:isture}"></div>
  </div>
  <script>
        new  Vue({
                 el:"#app",
                 data:{
                  istrue:true
                    }
 
 })
  </script>
</body>
</html>

运行结果：在这里插入图片描述
v-bind：class=对象
对象既：active=【键】 istrue=【值】
也可以绑定多个对象：

<div v-bind:class="{active:istrue,isround}"></div>

<script>
new Vue({
   el:"#app",
   data:{
        istrue:true,
        isround:true
   }
})
</script>

绑定多个参数可以进行切换效果

二：变量赋值

<style>
.active{width:100px;height:100px;background:Red;}
</style>
<div v-bind:class="myclass"></div>
<script>
  new Vue({
        el:"#app",
        data:{
          myclass:"active"
        }
 })
</script>

运行结果和上图一致！

三：构造一个对象返回，其实还是对象赋值
1.html 部分

<style>
.active{width:100px;height:100px;}
.mcolor{backgroud:green;}
</style>
<div v-bind:class="objclass"></div>

Vue代码部分

new Vue({
    el:"#app",
    data:{
    },
    computed:{
       objclass:function(){
              return:{
                active:true,
                mcolor:true,
              }
            }
     }
})

运行结果如图：
在这里插入图片描述

所以如果用对象的表达则是
【键】：【值】
【键】=classname
【值】=判断运算值 true false

zkelm.com

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
挑战百日学习计划(Vue)_v-bind:class

样式绑定分两种：v-bind：class =“”v-bind：style=“”表达式的结果可以是数组也可以是对象，但是都是vue中的变量直接定义class的名字则不生效一：对象赋值<html><head><style>.active{ width:100px; height:100px; backgroud:Red;}...
复制链接

扫一扫

专栏目录