07.vue中样式-class

最新推荐文章于 2022-06-14 17:30:36 发布

吃了可爱多的我

最新推荐文章于 2022-06-14 17:30:36 发布

阅读量89

点赞数

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

本文链接：https://blog.csdn.net/a123456789qqo/article/details/113801782

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

注:要先在该文件的同路径下导入vue.js

<!DOCTYPE html>
<html>
<head>
<title>Document</title>

<style>
    .red{
        color:red;
    }

    .thin{
        font-weight:200;
    }

    .italic{
        font-style:italic;
    }

    .active{
        letter-spacing: 0.5em;
    }
</style>
</head>

<body>
  <div id="app">
    <!-- <h1 class="red thin">我是大大的h1</h1> -->

    <!-- 第一种使用方式，直接传递一个数组，注：这里的class需要使用v-bind做数据绑定 -->
    <!-- <h1 :class="['red','italic']">我是大大的h1</h1> -->

    <!-- 在数组中使用三元表达式 -->
    <!-- <h1 :class="['red','italic',flag?'active':'']">我是大大的h1</h1> -->
      
    <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
    <!-- <h1 :class="['red', 'thin', {'active':flag} ]">我是大大的h1</h1> -->
      
    <!-- 在为class使用v-bind绑定对象时，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以这里不带引号；属性的值是一个标识符 -->
    <h1 :class="obj">我是大大的h1</h1>
  </div>

  <script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data: {
    flag:true,
    obj:{ red:true, thin:true, italic:false, active:false}
},
methods:{
}
})
</script>
</body>
</html>

吃了可爱多的我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07.vue中样式-class

<!DOCTYPE html><html><head><title>Document</title><style> .red{ color:red; } .thin{ font-weight:200; } .italic{ font-style:italic; } .active{ letter-spa
复制链接

扫一扫