前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue.js学习笔记(2)

Vue.js学习笔记(2)

作者头像
程序员不务正业
发布2018-09-13 16:28:33
4510
发布2018-09-13 16:28:33
举报
文章被收录于专栏:移动端周边技术扩展

样式与数据绑定

代码语言:javascript
复制
<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:当前样式
代码语言:javascript
复制
<style scoped>

</style>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.08.25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 样式与数据绑定
    • scoped:当前样式
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档