<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script src="./lib/vue-2.4.0.js"></script>

     <!-- 使用class样式：

         1、数组 直接传递一个数组，注意：这里的class需要使用 v-moddel 做数据绑定

         2、数组中使用三元表达式

         3、数组中嵌套对象 在数组中 使用对象替代三元表达式，提高代码可读性

         4、直接使用对象

     -->

 </head>

 <style>

 .red{

     color: red;

 }

 .thin{

     font-weight: 200;

 }

 .italic{

     font-style: italic;

 }

 .active{

     letter-spacing: 0.5em;  /*//中文字间距 */

 }

 </style>

 <body>

     <div id="app">

         <!-- 第一种：数组 直接传递一个数组，注意：这里的class需要使用 v-moddel 做数据绑定 -->

         <h1 :class="['red', 'thin']">第一种：数组 了解</h1>

         <!-- 第二种：数组中使用三元表达式 -->

         <h1 :class="['red', flag? 'active':'']">第二种：数组中使用三元表达式</h1>

         <!-- 第三种：数组中嵌套对象 在数组中 使用对象替代三元表达式，提高代码可读性-->

         <h1 :class="['red', 'italic', {'active' : flag}]">第三种：数组中嵌套对象</h1>

         <!-- 第四种：直接使用对象 在为class 使用 V-bind 绑定对象的时候，对象的属性是类名，

             由于对象属性可带引号也可不带引号，所以这里没有写引号；属性的值 是一个标识符 -->

         <!-- <h1 :class="{red:true, thin:true, italic:true, active:false}">第四种：直接使用对象</h1> -->

         <h1 :class="classObj">第四种：直接使用对象</h1>

         <!-- <h1 class="red thin">this is a letter</h1> -->

     </div>

     <script>

        //创建Vue实例 得到ViewModel

        var vm = new Vue({

            el:"#app",

            data:{

                flag: true,//第二种：数组中使用三元表达式/第三种：数组中嵌套对象

                classObj: {red:true, thin:true, italic:true, active:false},

            },

            methods:{}

        })

     </script>

 </body>

 </html>

vue 中使用class(样式)的更多相关文章

  1. 解决vue中element组件样式修改无效

    vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...

  2. vue中修改滚动条样式

    这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...

  3. vue中修改swiper样式

    问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang= ...

  4. Vue 中 css scoped 样式穿透 ( stylus[>>>] / sass / less[/deep/] )

    scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖.这时我们 ...

  5. VUE中的style 样式处理的Scope （<style scope>）

    在VUE组件中,为了让样式私有化,不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块. 但是这样的话,就会导致无法修改其他第三方组件样式,或者是内嵌的样式,解决方案 ...

  6. vue中v-bind绑定样式

    近来发现v-bind绑定样式的两个好玩的栗子 可以直接绑定到一个样式对象,让模板更清晰: <div id="app"> <div v-bind:style=&qu ...

  7. vue中定义多重样式

  8. 学习vue第五节，vue中使用class和style的css样式

    vue中使用class样式 数组 <h1 :class="['red', 'thin']">这是一个H1</h1> 数组中使用三元表达式 <h1 :c ...

  9. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

随机推荐

  1. SQL 介绍和操作

    1.什么是SQL SQL的全称是“结构话查询语句”(Structured Query Language ),是1974年有Boyce和chamberlin 提出来的.经过多年的发展,SQL语言已经成为 ...

  2. HDU 1298 T9 ( 字典树 )

    题意 : 给你 w 个单词以及他们的频率,现在给出模拟 9 键打字的一串数字,要你在其模拟打字的过程中给出不同长度的提示词,出现的提示词应当是之前频率最高的,当然提示词不需要完整的,也可以是 w 个单 ...

  3. 改变icon方向

    例你想要箭头朝上的图标而你只有箭头朝下的图标,不幸的是你又没有朝上的图标,那就旋转图标. <i class="icon iconfont _icon-iconfontfanhui4&q ...

  4. Ubuntu redis 实战 持久化策略 主从复制 以及 故障恢复

    推荐文章 redis数据结构学习 redis持久化 redis主从复制 redis哨兵

  5. TCP服务器并发编程构架：完成端口IOCP模式

    windows下socket网络编程模式:IOCP 完成端口 1)IOCP异步事件的获取放到操作系统的网络驱动层来处理,实际上反而是降低了编程难度, 2)同时对于多线程的并发调度,也放到操作系统级别来 ...

  6. spring util包 StringUtils工具类中的isEmpty() 方法解析

    今天在公司看到同事写的代码,无意发现在判断字符串类型时,使用的是StringUtils工具类中的isEmpty()去判断如下所示 @RequestMapping(value = "/pub/ ...

  7. AtomicReference 源码分析

    AtomicReference AtomicReference 能解决什么问题?什么时候使用 AtomicReference? 1)AtomicReference 可以原子更新引用对象. 2)comp ...

  8. 测开之路九十五：css进阶之光标和溢出内容处理

    光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...

  9. postman连接mysql执行操作

    postman也可以连接mysql 目录 1.安装 2.启动服务 3.执行sql语句 1.安装 想要postman连接mysql,需要安装xmysql,启动该服务,然后才可以调用. 预置条件:完成no ...

  10. maven(一) maven到底是什么

    为了方便自己查找,这里转载他人文章,原文出处http://www.cnblogs.com/whgk/p/7112560.html 我记得在搞懂maven之前看了几次重复的maven的教学视频.不知道是 ...