Vue那些事儿（样式绑定）

最新推荐文章于 2022-03-19 17:49:56 发布

前端小菜鸡99

最新推荐文章于 2022-03-19 17:49:56 发布

阅读量116

点赞数

分类专栏：笔记文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_46356186/article/details/108428700

版权

笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

Vue.js样式绑定

class与style时HTML元素的属性，用于设置元素的样式，可以用v-bind来设置样式属性。
Vue.js中v-bind在处理class和style时，专门增强
表达式的结果类型除了字符串之外，还可以式对象或数组

class属性绑定

1.将class的属性，在这里是isActive，设置为true显示所要展示的内容，false则是不显示。这里的active用于作为class名。来进行样式的写入。isActive也是在data中写入。

<div v-bind:class="{'active':isActive}"></div>
data：{
  isActive：true
}

也就是说上面的可以等同于

<div class="active"></div>

2.也可以写入多个class

 <div class="static">
        v-bind:class="{'active':isActive,'text-danger':hasError}"
    </div>

等同于：也就是说有了三个class；

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

3.采用就近原则（以对象的形式写入v-bind）

//写入样式，不用
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
//写入class，在这里的class是对象
<div id="app">
  <div v-bind:class="classObject"></div>
</div>
//写入对象
classObject: {
      active: true,
      'text-danger': true//此时的样式仅这个起作用
    }

4.绑定返回对象的计算属性

<style>
    .base {
        width: 100px;
        height: 100px;
      }
      .active {
        background: green;
      }
      .text-danger {
        background: red;
      }
      </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="ClassObject"></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                isActive:true,
                error:{
                    value:true,
                    type:'fatal'
                }
            },
            computed:{
                ClassObject:function(){
                    return {
                        base:true,//第一个样式可以写入
                        active:this.isActive&& !this.error.value,//可以是data中的对象，也可以是子对象
                        'text-danger':this.error.value&&this.error.type==='fatal',
                        //可以是data中的对象，也可以是子对象
                    }
                }
            }
        })
    </script>

语法数组

可以把一个数组传给v-bind:class

<div v-bind:class="[activeClass,errorClass"></div>
data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }

以上实例div class为：

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

2.还可以用三元表达式来切换列表中的class：

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

Vue.js style(内联样式)

可以在v-bind:style直接设置样式

 <div id="app">
        <div v-bind:style="{color:activeColor,fontsize:fontsize+'px'}">
        牛逼
        </div>
    </div>
    data: {
    activeColor: 'green',
	fontSize: 30
  }

以上实例化之后：

<div style="color:green",font-size:30px"> 牛逼</div>

也可以直接绑定到一个样式对象，让模块更清晰

 <div id="app">
       <div v-bind:style="styleObject"></div>
   </div>
   data{
   styleObject:{
       color:'green',
       fontSize:'30px'
   }
}

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

<div id="app">
          <div v-bind:style="[baseStyles,overridingStyle]">牛</div>
      </div>
      data：{
          baseStyles:{
              color:'green',
              fontSize:'30px'
          },
          overridingStyle:{
              'font-weight':'hold'
          }
      }

前端小菜鸡99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue那些事儿（样式绑定）

Vue.js样式绑定class与style时HTML元素的属性，用于设置元素的样式，可以用v-bind来设置样式属性。Vue.js中v-bind在处理class和style时，专门增强表达式的结果类型除了字符串之外，还可以式对象或数组class属性绑定1.将class的属性，在这里是isActive，设置为true显示所要展示的内容，false则是不显示。这里的active用于作为class名。来进行样式的写入。isActive也是在data中写入。<div v-bind:class=
复制链接

扫一扫

专栏目录