<!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. react-native-login-redux

    项目地址如下 https://github.com/agunbuhori/react-native-login-redux 先看页面 ```js // 还有中英文切换 //src/global.js ...

  2. OSGi教程：Resource API Specification

    此教程基于OSGi Core Release 7 OSGi Resource API规范 详细内容上面英文教程有详细解答 下面主要是一些个人见解,若有不当之处,欢迎指出: Resource:就是能够被 ...

  3. Directx11教程(42) 纹理映射(12)-简单的bump mapping

    原文:Directx11教程(42) 纹理映射(12)-简单的bump mapping        有时候,我们只有一个粗糙的模型,但是我们想渲染纹理细节,比如一个砖墙,我们如何在只有一个平面的时候 ...

  4. iOS 9 学习系列：Split Screen Multitasking

    http://www.cocoachina.com/ios/20151010/13601.html iOS 9 的一个重大变化就是增加了多任务,这个多任务允许用户在屏幕上同时运行多个 app.有两种形 ...

  5. spring调试

    spring-beans DefaultListableBeanFactory preInstantiateSingletons:650 RequestMappingHandlerMapping Ab ...

  6. cocos2dx 2.2.3在Windows 7 64bit上搭建开发环境

    最终弄完了cocos2dx 2.2.3在windows 7 64bit上的环境搭建,过程比較揪心.揪心的主要原因还是引擎的开发人员和官方文档的写作者都是偏爱MAC OS的,所以官方文档中的安装方法是以 ...

  7. AT2346 No Need

    atcoder上的题目 链接 一道思维题目 可以发现如果X是可有可无的,那么所有小于X的数也一定是可有可无的, 所有我们只要找出最大的那个可有可无的数字就好了 进一步分析,发现 若A1, A2, . ...

  8. 《js高级程序设计》6.1.1-6.1.3——数据属性、访问器属性

    数据属性:该属性包含了一个数据值的位置,它包含了4个描述行为的特性:1. [[Configurable]]:表示是否能通过delete删除属性从而重新定义属性,能否修改属性的特性,能否把属性修改为访问 ...

  9. （转）理解inode

    作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2011/12/inode.html 一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上 ...

  10. ubuntu18.10 安装pycurl

    sudo apt-get install libcurl3 sudo apt-get install libcurl4-openssl-devsudo apt-get install python3 ...