<!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. 我也来----xia bi bi 一下----微信小程序

    工作刚到一阶段 就看了看微信小程序  自己做了个小dome 主要是为了让我女朋友能够学习做菜! 然而悲催的发现我根本没有App ID   不说快了  直接上图 个人感觉开发起来还是很简单的. 对着AP ...

  2. 深入学习C#匿名函数、委托、Lambda表达式、表达式树类型——Expression tree types

    匿名函数 匿名函数(Anonymous Function)是表示“内联”方法定义的表达式.匿名函数本身及其内部没有值或者类型,但是可以转换为兼容的委托或者表达式树类型(了解详情).匿名函数转换的计算取 ...

  3. 架构3(基于LVS LB集群解决方案一:piranha)

    1.实现调度器的HA 2.对realserver做健康检测 3.动态维护IPVS路由表 pulse 活跃和备用lvs路由器中都会运行pulse守护进程,在备用路由器中,pulse向活跃的服务器的公共接 ...

  4. Linux之cat的使用

    基本介绍 工作原理 从标准输入读入要 cat 的文件列表,然后逐个打开,读入文件内容,再将内容输出到标准输出上. 使用场景 一次显示整个文件 从键盘创建一个文件 将几个文件合并为一个文件 将一个或多个 ...

  5. 如何生成Junit报告

    前言: 对Eclipse的工程写单元测试: 1. 一个工程有多个测试类,将测试类放到一个测试包下. 2. 每一个测试类写好,都单独执行run as ->JUnit Test测一下.    3. ...

  6. CMake和Linux编程:find_package的使用

    1.第一个CMake例子 在 t1 目录建立 main.c 和 CMakeLists.txt(注意文件名大小写): main.c 文件内容: //main.c #include <stdio.h ...

  7. python基础之 while 逻辑运算符 格式化输出等

    1.while循环 while 条件: 循环体 while 条件: 循环体 else: 循环体 重点: 当条件为真的时候,就进入循环体,从上到下依次执行,执行完最后一条语句时,while并不是直接退出 ...

  8. MySQL Backup mysqldump 常用选项与主要用法

    The mysqldump client utility performs logical backups, producing a set of SQL statements that can be ...

  9. awk 同时指定多个分隔符

    $ echo "id: xxx(6667)xxx"|awk -F "[()]" '{print $2}' $ 6667 $ echo "abc[def ...

  10. 发布自己的npm包、开源项目

    背景:由于最近在做项目之余想做一些其他的事,所以东找找西找找的,最后决定写一个封装一些常用原型方法的NPM包,但不仅限于此.话不多说,说一下实践过程. 一.注册NPM及如何上传NPM包参考连接:htt ...