<!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. yarn配置日志聚合

    [原文地址] 日志聚集是YARN提供的日志中央化管理功能,它能将运行完成的Container/任务日志上传到HDFS上,从而减轻NodeManager负载,且提供一个中央化存储和分析机制.默认情况下, ...

  2. GitLab上传项目到新的分支

    多人协同开发,GitLab上的group仓库里的master分支作为开发分支(最终从dev提交的代码),dev分支作为每个人的代码测试后合并的分支,每个人需要定期merge request自己的分支到 ...

  3. c++课设

    #include <stdio.h>#include <time.h>#include <math.h>#define C 60000;struct Student ...

  4. word2vec生成词向量和字向量

    生成字符向量的过程中需要注意: 1)在收集数据生成corpus时候,通过Word2Vec生成字向量的时候,产生了“ ”空格字符向量,但是加载模型是不会成功的.那么你不是生成的binary文件,就可以修 ...

  5. ES6 迭代器

    Iterator Iterator 是 ES6 引入的一种新的遍历机制,迭代器有两个核心概念: 迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为Symbol.itera ...

  6. 常见web UI 元素操作 及API使用

    1. 链接(Link) // 找到链接元素,这个方法比较直接,即通过超文本链接上的文字信息来定位元素,这种方式一般专门用于定位页面上的超文本链接 WebElement link1 = driver.f ...

  7. ORA-01555错误

    有这样一种情况 0:00 我们开始查询,查询的数据是100万条 0:01 一个session update了第100万条数据 0:01 update提交了,完成 1:00 我们的查询还在继续,只读到了 ...

  8. 利用StateListDrawable给button动态设置背景

    项目中,遇到相同样式的Button,只是stroke颜色不一样.为了实现一个,就得写两个shape文件,一个selector文件:多个还得重复写. 解决方法: 结合StateListDrawable给 ...

  9. 笔记：Linux（AWS Redhat）开机启动workman进程（/etc/rc.local必须是755权限）

    1.使用which命令查看php的安装路径 [root@ip---- ~]# which php /usr/bin/php 2.使用vim /etc/rc.local将要执行的命令加入/etc/rc. ...

  10. Python类中的__init__() 和 self 的解析

    原文地址https://www.cnblogs.com/ant-colonies/p/6718388.html 1.Python中self的含义 self,英文单词意思很明显,表示自己,本身. 此处有 ...