Vue.js学习笔记(2)

样式与数据绑定

<template>
  <div>
 <!--直接添加样式-->
    <div class="active"></div>
    <!--样式与数据绑定-->
    <div :class="{active: isActive}"></div>
    <br>
    <div :class="[activeClass, errorClass]">文字</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      isActive: true,
      activeClass: 'active',
      errorClass: 'text-danger'
    }
  }
}
</script>

<!--样式-->
<style scoped>
  .active {
    width: 100px;
    height: 100px;
    background: red;
  }
  .text-danger {
    background: yellow;
    text-align: center;
  }
</style>

scoped:当前样式

<style scoped>

</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券