在Vue中使用样式

使用class样式

  1. 数组

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

  1. 数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

  1. 数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

  1. 直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
<!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>

  <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="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

    <!-- 在数组中使用三元表达式 -->

    <!-- <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

    <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->

    <!-- <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1> -->

    <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->

    <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        flag: true,

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

      },

      methods: {}

    });

  </script>

</body>

</html>

使用内联样式

  1. 直接在元素上通过 :style 的形式，书写样式对象

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

  1. 将样式对象，定义到 data 中，并直接引用到 :style 中

  • 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

  • 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

  1. 在 :style 中通过数组，引用多个 data 上的样式对象

  • 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

  • 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
<!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>

</head>

<body>

  <div id="app">

    <!-- 对象就是无序键值对的集合 -->

    <!-- <h1 :style="styleObj1">这是一个h1</h1> -->

    <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        styleObj1: { color: 'red', 'font-weight': 200 },

        styleObj2: { 'font-style': 'italic' }

      },

      methods: {}

    });

  </script>

</body>

</html>

vuejs基础-style样式的更多相关文章

  1. Android 基础一 TextView，Style样式，Activity 传值，选择CheckBox 显示密码

    1.修改TextView字体 mTextView = (TextView) findViewById(R.id.textview1); mTextView.setText("I am her ...

  2. DOM Style样式对象的详细用法

    DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head>     ...

  3. JS学习之动态加载script和style样式

    前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点".我们都知道一个基本的网页 ...

  4. 使用ueditor的时候，style样式传递到后台时被过滤没了

    在项目中,使用ueditor的时候,style样式传递到后台时被过滤没了 转:https://www.cnblogs.com/theroad/p/5761743.html 经过chrome的一番调试后 ...

  5. 用正则表达式修改html字符串的所有div的style样式

    最近项目中有一接口返回的一个字段是html格式的字符串,里边每个div中style的高度是固定的px,然后再手机端显示的时候发现,div中的内容重叠了:效果图如下: 对应的div如下: 由于高度固定, ...

  6. 【WPF】MVVM动态修改Bingding的另一种思路——用Style样式

    问题场景: 界面上有个ListBox控件,它的内容Item绑定了一个列表,即 ItemsSource =”{Binding StudentList}”.这个StudentList列表在该界面View对 ...

  7. 5、Semantic-UI之基础按钮样式

    5.1 基础按钮样式   在Semantic-UI中定义了很多的按钮样式,可以通过class="ui button"来指定,也可以在class中指定颜色. 示例:定义基础按钮样式 ...

  8. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JavaScript---动态加载script和style样式

    一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点". 一个基本的网页格式 <!DOCT ...

随机推荐

  1. python学习第四十四天斐波那契数列和yield关键词使用

    斐波那契数列是数学中的常见的算法,第一个第二个不算,从第三个开始,每个数的都是前面两个数的和,使用yield关键词把生成的数列保存起来,调用的时候再调用,下面举例说明一下 def fab(max): ...

  2. Aurora测试----随机数字产生

    在xilinx模板中,存在一个Aurora样本工程,包含众多的子函数,本系列本文将逐一对其进行解析,首先是aurora_8b10b_0_FRAME_GEN函数,根据官方的说明,其作用是:该模块是一个模 ...

  3. C# Lodop与C-Lopdop选择打印机

    原文:https://www.cnblogs.com/huaxie/p/9766886.html https://www.cnblogs.com/huaxie/p/10857490.html http ...

  4. VirtualBox中安装CentOS 7后无法上网问题

    1.在VirtualBox的设置界面,点击“网络”, 将虚拟机的“连接方式”设置为桥接模式, “界面名称”选择笔记本的无线网卡(一般是“wireless Network”的选项) 将“接入网线”勾选上 ...

  5. Maya多版本下载与激活方法

    目录 1. 安装激活说明 1. 安装激活说明 Maya2019:https://www.cnblogs.com/coco56/p/11425559.html Maya2017:https://www. ...

  6. Linux下python pip手动安装笔记

    今天查问题, 从redis集群中模糊查询某个key, 用一些重复的命令, 链接不同的node, redis-cli 去查, 感觉不舒服. 考虑写一些shell或py来简化一下. 一查环境, 安装了py ...

  7. python对象之__call__方法

    先看示例,然后啥都明白了 class Student(): def __call__(self, *args, **kwargs): print('__call__方法被调用', *args) cla ...

  8. Word文档粘贴到DEDECMS

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  9. spring mvc中的@Entity是什么意思?

    @Entitypublic Class JavaBean{}标注该类为实体类.

  10. python cv2在验证码识别中的使用

    使用函数cv2.imread(filepath,flags)读入一副图片 filepath:要读入图片的完整路径 flags:读入图片的标志 cv2.IMREAD_COLOR:默认参数,读入一副彩色图 ...