<!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: '#0ff', 'font-weight': 200 },

        styleObj2: { 'font-style': 'italic' }

      },

      methods: {}

    });

  </script>

</body>

</html>

Vue 设置style属性的更多相关文章

  1. 练习vue(class,style属性)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue 设置style样式

    1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...

  3. JavaScript之Style属性学习

    当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...

  4. CSS style 属性

    CSS style 属性 定义和用法 必需的 type 属性规定样式表的 MIME 类型. type 属性指示 <style> 与 </style> 标签之间的内容. 值 &q ...

  5. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  6. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. js DOM 节点树 设置 style 样式属性

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  9. 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

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

随机推荐

  1. 文本分类四之权重策略：TF-IDF方法

    接下来,目的就是要将训练集所有文本文件(词向量)统一到同一个词向量空间中.在词向量空间中,事实上不同的词,它的权重是不同的,它对文本分类的影响力也不同,为此我们希望得到的词向量空间不是等权重的空间,而 ...

  2. 【JZOJ4742】【NOIP2016提高A组模拟9.2】单峰

    题目描述 输入 输出 样例输入 2 样例输出 2 数据范围 解法 答案为2^(n-1),快速幂即可. 证明:显然峰值必定为n,那么对于其他n-1个数,要么放在峰值的左边,要么放在峰值的右边,所以方案数 ...

  3. linux下的OpenCV安装＆学习笔记

    http://www.linuxdiyf.com/viewarticle.php?id=20731 (本想在fedora下安装编译的,但目前opencv官网.sourceforge等网站都无法访问下载 ...

  4. javascript正则表达式知识大全

    什么是正则表达式 正则表达式(regular expression)是一个描述字符模式的对象.ECMAScript的RegExp类表示正则表达式,而String和RegExp都定义了使用正则表达式进行 ...

  5. cmakelists.txt中配置openg环境出现： undefined reference to symbol 'glLightfv'

    cmakelists.txt中配置openg环境出现: undefined reference to symbol 'glLightfv' 解决方法: 在cmakelists.txt添加 find_p ...

  6. 【JZOJ4817】【NOIP2016提高A组五校联考4】square

    题目描述 输入 输出 样例输入 3 4 1 1 0 1 0 1 1 0 0 1 1 0 5 1 1 2 3 2 1 3 2 3 2 3 4 1 1 3 4 1 2 3 4 样例输出 1 1 1 2 2 ...

  7. spark编译与onyarn的执行

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u014393917/article/details/24640715 Spark on yarn执行 ...

  8. Xcode10 import导入文件的坑

    更新了10.0的Xcode,踩了两个坑,记录一下. #import "" 双引号内输入任何字符 都会导致Xcode崩溃 解决方案: target - buildSettings - ...

  9. iOS Animation 主流炫酷动画框架(特效)收集整理 #91

    https://github.com/sxyx2008/DevArticles/issues/91

  10. 2019-9-18-WPF-笔刷绑定不上可能的原因

    title author date CreateTime categories WPF 笔刷绑定不上可能的原因 lindexi 2019-09-18 09:46:14 +0800 2019-9-18 ...