<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

   </head>

   <body>

       <div id="app">

       <!-- 对象就是无序键值对的集合 -->

        <!--  <h1 :style="{color:'red','font-weight':200}">这是一个h1</h1>   -->

         <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>

第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式的更多相关文章

  1. vue 快速入门 系列 —— vue loader 下

    其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...

  2. vue 快速入门 系列 —— Vue(自身) 项目结构

    其他章节请看: vue 快速入门 系列 Vue(自身) 项目结构 前面我们已经陆续研究了 vue 的核心原理:数据侦测.模板和虚拟 DOM,都是偏底层的.本篇将和大家一起来看一下 vue 自身这个项目 ...

  3. vue 快速入门 系列 —— Vue 实例的初始化过程

    其他章节请看: vue 快速入门 系列 Vue 实例的初始化过程 书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码, ...

  4. vue 快速入门 系列 —— vue 的基础应用（上）

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  5. vue 快速入门 系列 —— vue 的基础应用（下）

    其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...

  6. vue 快速入门 系列 —— vue loader 上

    其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...

  7. vue 快速入门 系列 —— vue loader 扩展

    其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...

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

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

  9. Vue中通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义在data中,并直接引用到:style中 3.在:style中通过数组,引用多个data上的样式对象

随机推荐

  1. Java多线程(1)：3种常用的实现多线程类的方法

    (1) 继承java.lang.Thread类(Thread也实现了Runnable接口) 继承Thread类的方法是比较常用的一种,如果说你只是想起一条线程.没有什么其它特殊的要求,那么可以使用Th ...

  2. 非线性函数图像表示(GLSL)

    说明:绘图区域x轴(0->1),y轴(0->1); 1.y = 0.5 + sqrt(x * (1 - x)) 2.y = smoothstep(a , b , x) y = smooth ...

  3. spark基础概念（一）：幂等性。

    1) 出处:幂等性源自数学概念,表示f(x) = f(f(x)); 含义:多次执行一个函数得到的值和执行一次得到的值相同. 如:f(x) = pow(x, 1);  f(x) = abs(x); 2) ...

  4. app测试基础知识之命令

    app测试点:功能测试,安全测试,用户体验测试,交叉事件测试,兼容性测试,性能测试,安装/升级/卸载 ,UI测试 命令操作: adb connect 名 adb devices adb  instal ...

  5. 再谈mysql锁机制及原理—锁的诠释

    加锁是实现数据库并发控制的一个非常重要的技术.当事务在对某个数据对象进行操作前,先向系统发出请求,对其加锁.加锁后事务就对该数据对象有了一定的控制,在该事务释放锁之前,其他的事务不能对此数据对象进行更 ...

  6. PHP7 开启Zend Opcache

    PHP7 开启Zend Opcache 作为PHP这10年来最大的版本与性能升级,PHP7在多次的测试中都表现出很夸张的性能提升,然而,为了让它能发挥出最大的性能,需要手动开启PHP自带的opcach ...

  7. 第一次把mysql装进docker里碰到的各种问题

    最近电脑经常关机要关好长时间,老是需要长按电源键强行关机.也不知道是怎么回事. 后来查看关机时的日志,发现是mysql停不掉.这可闹心了!怎么办?上网搜了搜也没有找到什么好的解决办法.总不能每次关机都 ...

  8. Navicat 连接数据库避免中文显示乱码问题解决

    在使用Navicat Premium连接数据库进行操作时,为避免出现中文乱码的问题解决: 1.连接SQL Server 在新建数据库时,常规 设置 排序规则 为 Chinese_PRC_CS_AS_W ...

  9. GDOI2018游记

    前言 不知怎的,本蒟蒻居然拿到了GDOI参赛名额 于是乎,我稀里糊涂地跟着诸位大佬屁颠屁颠地来到了阔别已久的中山一中 腐败difficult and interesting的GDOI比赛就这样开始了. ...

  10. redis 学习（12）-- redis 发布订阅

    redis 发布订阅 发布订阅模式中的角色 发布者(publisher) 订阅者(subscriber) 频道(channel) 如图所示: 发布者发布消息到频道,订阅了频道的订阅者可以收到消息,订阅 ...