<!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. python中文分词库——pyltp

    pyltp在win10下安装比较麻烦,因此参考以下安装方式, 1.下载 win10下python3.6 2.安装 下载好了以后, 在命令行下, cd到wheel文件所在的目录, 然后使用命令pip i ...

  2. python全栈开发 * 34知识点汇总 * 180719

    文件上传下载:一.文件上传(内容较少)服务器:(代码) import socket import json sk=socket.socket() sk.bind(("127.0.0.1&qu ...

  3. 学习 ASP.NET Core 2.1：集成测试中使用 WebApplicationFactory

    WebApplicationFactory 是 ASP.NET Core 2.1 新特性 MVC functional test infrastructure 中带来的新东东,它封装了 TestSer ...

  4. 苏宁基于Spark Streaming的实时日志分析系统实践 Spark Streaming 在数据平台日志解析功能的应用

    https://mp.weixin.qq.com/s/KPTM02-ICt72_7ZdRZIHBA 苏宁基于Spark Streaming的实时日志分析系统实践 原创: AI+落地实践 AI前线 20 ...

  5. [daily] 比端口转发更高级的ssh device tunnel转发

    没有什么能够阻挡,你对自由的向往. 场景: 我有一台设备Server100,在某一个f复杂的内网里,需要多次ssh跳转可以访问到.但是它不能直接访问internet. 我现在需要在我的ssh路径上,搭 ...

  6. scala-actor线程间通信

    import scala.actors.Actor case class Msg(val info: String, act1: MyActor1) class MyActor extends Act ...

  7. python摸爬滚打之day21---- 模块

    1.MD5加密模块 MD5是一种不可逆的加密算法, 是安全而且可靠的.  在某些网站上能够搜到MD5解密工具, 其实并没有解密工具, 而是"撞库"的方式. 网站将一些MD5数据保存 ...

  8. TZOJ：3660: 家庭关系

    描述 给定若干家庭成员之间的关系,判断2个人是否属于同一家庭,即2个人之间均可以通过这些关系直接或者间接联系. 输入 输入数据有多组,每组数据的第一行为一个正整数n(1<=n<=100), ...

  9. python基础(4)-元组&字典&字符串&队列

    元组(tuple) #元组相对列表来说不同之处是只读不可写 读操作和列表一致 letter_tuple = ('a','b','c','d'); print(letter_tuple[0]);#res ...

  10. java开发定时任务执行时间

    定时任务执行时间配置详解 Seconds Minutes Hours Day-of-month Month Day-of-Week Year
 秒         分        时      天  ...