<!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>

09.vue中样式-style的更多相关文章

  1. wpf 中关于Image中样式Style的一点总结

    第一种写法: (1):定义样式 <Style x:Key="imgStyle" TargetType="Image">  : <!-- Tar ...

  2. vue_music:排行榜rank中top-list.vue中样式的实现:class

    排行榜的歌曲列表,根据排名渲染不同的样式,同时需要考虑分辨率的2x 3x图 不同的样式--:class 考虑分辨率的2x 3x图--需要在stylu中的mixin中bgImage根据屏幕分辨率选择图片 ...

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

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

  4. vue 中使用style（样式）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue中样式的典型操作(:class,:style)

    <template> <div class="home-wrapper"> <div class="home-top">th ...

  6. 【转】vue中样式被覆盖的问题，vue中的style不生效

    转载:http://www.cnblogs.com/shangjun6/p/11416054.html 在我们引入外部的样式时,发现自己无论如何都改不了外部的样式,自己的样式老被覆盖,究其原因还是我们 ...

  7. vue 中样式的绑定

    1.class的对象绑定 //对应的css <style> .active { color: red; } </style> <!--html 对应的代码--> & ...

  8. 08.vue中样式-class

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 手写vue中v-bind:style效果的自定义指令

    自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...

随机推荐

  1. 【转】- 从FM推演各深度CTR预估模型(附代码)

    从FM推演各深度CTR预估模型(附代码) 2018年07月13日 15:04:34 阅读数:584 作者: 龙心尘 && 寒小阳 时间:2018年7月 出处: 龙心尘 寒小阳

  2. C++ map的方法

    参考文档:http://blog.csdn.net/allovexuwenqiang/article/details/5686583 Map是c++的一个标准容器,她提供了很好一对一的关系,在一些程序 ...

  3. requirejs配置问题

    <script src="lib/requirejs/require.js " data-main="js/main.js"> </scrip ...

  4. C和C指针小记(十八)-使用结构和指针-双向链表

    1.双链表 1.1 双向链表的声明 在一个双链表中,每个节点都包含两个指针--指向前一个节点的指针和指向后一个节点的指针. 声明 typedef struct NODE { struct NODE * ...

  5. spark优化设置

    ->>>配置参数优化 SparkConf sc = new SparkConf().setAppName("com.sp.test.GroupTop3").set ...

  6. 洛谷P1021邮票面值设计 [noip1999] dp+搜索

    正解:dfs+dp 解题报告: 传送门! 第一眼以为小凯的疑惑 ummm说实话没看标签我还真没想到正解:D 本来以为这么多年前的noip应该不会很难:D 看来还是太菜了鸭QAQ 然后听说题解都可以被6 ...

  7. session_unset 与 session_destroy 区别

    session_unset() 释放当前在内存中已经创建的所有$_SESSION变量,但不删除session文件以及不释放对应的session id session_destroy() 删除当前用户对 ...

  8. 43-3-STM32的CAN外设

    1.STM32 的芯片中具有 bxCAN 控制器 (Basic Extended CAN), 它支持 CAN 协议 2.0A 和2.0B 标准. 2.外设中具有 3 个发送邮箱,发送报文的优先级可以使 ...

  9. python框架之Flask(3)-Blueprint(蓝图)

    蓝图 用途 给开发者提供清晰的目录结构. 使用 目录结构 1.创建项目. 2.在项目目录下创建与项目名同名文件夹. 3.在 test_prj 文件夹下创建 __init__.py 文件,并在其中实例化 ...

  10. C语言进阶之路（二）----字符串操作常见模型

    1.while模型 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #includ ...