<!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. linux主要目录

    /:根目录,一般根目录下只存放目录,在 linux 下有且只有一个根目录,所有的东西都是从这里开始 当在终端里输入 /home ,其实是在告诉电脑,先从 / (根目录)开始,再进入到 home 目录/ ...

  2. 使用LibreOffice修复受损的Office文档

    在工作中时常遇到Office文档损坏,用MS Office不能打开,有时候用LibreOffice(测试为4.2版本)可以打开,另存一下就好了. 此方法虽然不是100%管用,但在实际中大半都可以. 另 ...

  3. [No0000C6]Visual Studio 2017 函数头显示引用个数

    Visual Studio 2017  函数头显示引用个数

  4. javascript匿名函数 闭包

    匿名函数 (function(){                console.info("111111111");            })(); var my = (fun ...

  5. oracle&mysql配置

    ===========pom.xml=========== <dependency> <groupId>com.oracle.jdbc</groupId> < ...

  6. Improved GAN

    https://www.bilibili.com/video/av9770302/?p=16 从之前讲的basic gan延伸到unified framework,到WGAN 再到通过WGAN进行Ge ...

  7. C++11 使用异步编程std::async和std::future

    先说明一点:std::asyanc是std::future的高级封装, 一般我们不会直接使用std::futrue,而是使用对std::future的高级封装std::async. 下面分别说一下. ...

  8. PTA地下迷宫探索

    地道战是在抗日战争时期,在华北平原上抗日军民利用地道打击日本侵略者的作战方式.地道网是房连房.街连街.村连村的地下工事,如下图所示. 我们在回顾前辈们艰苦卓绝的战争生活的同时,真心钦佩他们的聪明才智. ...

  9. Spring中的事务操作

    事务的特性 原子性:强调事务的不可分割. 一致性:事务的执行的前后数据的完整性保持一致. 隔离性:一个事务执行的过程中,不应该受到其他事务的干扰. 持久性:事务一旦结束,数据就持久化到数据库. 如果不 ...

  10. WebMagic

    一.WebMagic的四个组件 1.Downloader Downloader负责从互联网上下载页面,默认使用apache HttpClient作为下载工具 2.PageProcessor 负责解析页 ...