Vue学习(4)Class 与 Style 绑定

文章目录 收缩

绑定 HTML Class

字符串语法

模板:

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

data:

data: {
  active: 'red'
}

结果渲染为:

<div class="static red"></div>

对象语法

模板:

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

data:

data: {
  isActive: true,
  hasError: false
}

结果渲染为:

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

数组语法

模板:

<div :class="[activeClass, errorClass]"></div>

data:

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为:

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

绑定内联样式

对象语法

模板:

<div v-bind:style="styleObject"></div>

data:

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

渲染为:

<div style="color:red,font-size:13px"></div>

数组语法

数组语法可以将多个样式对象应用到同一个元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>

DEMO

<style>
    .red {
        color: red
    }
    .blue {
        color: blue
    }

    .font20 {
        font-size: 20px
    }
</style>
</head>
<body>
<div id="app">
    <h1>class绑定</h1>
    <h2 :class="classA">字符串语法</h2>
    <h2 :class="{blue:isBlue}">对象语法</h2>
    <h2 :class="[classA, font20]">数组语法</h2>
    <br>
    <h1>style绑定</h1>
    <h2 :style="{fontSize:'30px',backgroundColor:'blue',color:'white'}">对象语法</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            classA: 'red',
            font20: 'font20',
            isBlue: true,
        }
    })
</script>
</body>

发表评论

电子邮件地址不会被公开。 必填项已用*标注