在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. 树莓派VNC Viewer 远程桌面配置教程

    作为一个刚入门的小白,你还在为如何配置树莓派的远程桌面控制苦恼? 是否希望能够每次在树莓派上无须接上显示器.键盘.鼠标以及走到放置你的树莓派的地方就可以运行指令! 在这篇树莓派文章中,你将学到如何在树 ...

  2. 图片,word,Excel等附件上传

    @ResponseBody @RequestMapping("/upload") public String upload(HttpServletRequest request, ...

  3. map集合中取出分类优先级最高的类别名称

    import java.util.Arrays; import java.util.Collection; import java.util.HashMap; import java.util.Map ...

  4. Shell脚本的fork炸弹

    #!bin/bash#功能:快速消耗计算机资源,致使计算机死机#作者:liusingbon#定义函数名为.(点), 函数中递归调用自己并放入后台执行function . { .|.& };.

  5. [HNOI2009]有趣的数列（卡塔兰数，线性筛）

    [HNOI2009]有趣的数列 题目描述 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足a1< ...

  6. 1145. Hashing - Average Search Time (25)

    The task of this problem is simple: insert a sequence of distinct positive integers into a hash tabl ...

  7. 【LeetCode】动态规划（下篇共39题）

    [600] Non-negative Integers without Consecutive Ones [629] K Inverse Pairs Array [638] Shopping Offe ...

  8. ps:新建Photoshop图像

    从现在起我们开始正式地接触Photoshop,为了保证大家的快捷键设置与教程内容一致.请确认Photoshop的快捷键设置是默认值.可从菜单[编辑 键盘快捷键]打开快捷键设置,在组选项里面选择“Pho ...

  9. ORM大结局

    1.添加记录: # 一对多的添加方式: #pub_obj=Publish.objects.filter(name="橙子出版社").first() # book=Book.obje ...

  10. 洛谷 P4827 [国家集训队] Crash 的文明世界

    题目描述 ​ 给你一棵 n 个点的树,对于树上的每个节点 i,求 \(\sum_{j=1}^ndis(i,j)^k\).其中 \(dis(i,j)\) 为两点在树上的距离. 输入格式 ​ 第一行两个整 ...