Vue class数据绑定和style绑定的笔记

最新推荐文章于 2023-09-15 16:28:41 发布

mini韦

最新推荐文章于 2023-09-15 16:28:41 发布

阅读量189

点赞数

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

本文链接：https://blog.csdn.net/w6718189/article/details/116014918

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

绑定 HTML Class

对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class 个格式如下：

<div v-bind:class="{ key:value, key:value}"></div>
<div v-bind:class="{ 类名:boolean,  类名2:boolean}"></div>
  <!-- 报错写法 -->
 <div :class="{ 'a', 'b' }">1111</div>
  <div :class="{ a b }">1111</div>
  <!-- 不生效写法 -->
 <div :class="{ a, b }">1111</div>

例如：
（类名不加引号，类型有“-”类似“van-radio” 绑定的时候必须加引号）

	  <!-- 加引号情况 -->
   <div  :class="{ 'dis-img-icon': isClick }">aaa</div>
   <div :class="{ a: true, b: true, c: false }">aaa</div>
     <div :class="{ a: isActive, b: hasError, c: isActive }">aaa</div>
   <div :class="classObj">1111</div>

v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板：

  <div :class="{ b: isActive }" class="a">aaa</div>

如果过于复杂，也可以放在一个methods 或者computed 中

      <div :class="getClass()">1111</div>

数组语法
（类名加引号)


 <!-- 数组带引号 为样式名称或者字符串  不带引号则是变量 -->
      <div :class="['b', 'c']" class="a">1111</div>
      <div :class="[x, z]" class="a">1111</div>
 <!-- 如果你也想根据条件切换列表中的 class，可以用三元表达式： -->
      <div :class="[isActive ? y : z]" class="a">1111</div>

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

   <!-- 绑定写法 -->
      <!-- <div :style="{key属性名:value（属性值）}"></div> -->
      <!-- 50px加引号  否者变成变量使用 -->
      <div :style="{ fontSize: '50px' }">ccc</div>
      <div :style="{ fontSize: hasError ? '50px' : '20px' }">ccc</div>
      //多属性 用“，”隔开 不是“；” 
      <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

export default {
  data() {
    return {
  return {
      x: "a",
      y: "b",
      isActive: true,
      hasError: false,
      classObj: {
        a: true,
        b: true,
        c: false
      }
    };
  },
    methods: {
    getClass() {
      return {
        a: this.isActive,
        b: this.hasError,
        c: this.isActive
      };
    }
  }
};
</script>
<style lang="less" scoped>
.a {
  width: 100px;
  height: 100px;
}
.b {
  font-size: 20px;
  background: red;
}
.c {
  background: blue;
}

</style>