<!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. xcode自动完成代码 Code Snippet Library

    今天发现Xcode里一个好东西:代码片段库 你可以将自己常用的代码放到里面,给它命名,设置快捷键,以后想用这段代码的时候只要按快捷键,就会出现提示,直接将这段代码显示出来,十分高效. 比如我经常会用到 ...

  2. Spring_自动组件扫描和 基于注解配置bean

    自动组件扫描 启用Spring组件扫描功能. 使用@Component注释来表示这是类是一个自动扫描组件.  package com.tanlei.dao; import org.springfram ...

  3. 【JZOJ4792】【NOIP2016提高A组模拟9.21】整除

    题目描述 麦克雷有一个1~n的排列,他想知道对于一些区间,有多少对区间内的数(x,y),满足x能被y整除. 输入 第一行包含2个正整数n,m.表示有n个数,m个询问. 接下来一行包含n个正整数,表示麦 ...

  4. iOS 开发该选择Blocks还是Delegates

    http://www.cocoachina.com/ios/20150925/13525.html 前文:网络上找了很多关于delegation和block的使用场景,发现没有很满意的解释,后来无意中 ...

  5. 【风马一族_php】常用的语句

    设置脚本的编码 <?php header('Content-type:text/html;charset=utf-8');  ?> 按原格式的输入内容 echo <pre>; ...

  6. linux 下 自己写的 html文件产生中文乱码问题 解决办法

    再文件顶部加上  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" / ...

  7. 如何在“代码”视图中工作并充分利用 Dreamweaver 的编码功能。如 Emmet 缩写

    可通过多种方式在 Dreamweaver 中处理代码. 您可以使用“新建文档”对话框打开新的代码文件,然后开始键入您的代码. 在 Dreamweaver 中创建新的代码文件 键入时,会显示代码提示以帮 ...

  8. python 错误类型

  9. ajax封装最后形态

    function obj1(obj) { obj.t = new Date().getTime(); var res = []; for (var key in obj) //url中不能出现中文 r ...

  10. HashSet的运用

    TestHashSet.java package com.sxt.set1; /* * Set接口 唯一:元素唯一(不重复) * 无序:不是按照添加的顺序显示数据 * 采用哈希表的方式存储 * 根据哈 ...