<!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. 【转】一次HBase问题的解决过程（Status: INCONSISTENT）

    [From]https://www.cnblogs.com/quchunhui/p/9583746.html ==版本信息== HBase:2.7.1 Storm:1.0.1 RocketMQ:3.4 ...

  2. 2019年大牛最新整理的Python技术入门路线

    Python作为一门学习上手快.开发效率高.代码优雅的编程语言,一直以来都是最热门的几种语言之一,甚至在进入2019年之后热度超过了十几年的霸主Java,成为最受欢迎的语言.Python一直有胶水语言 ...

  3. 【C/C++】对于可重入、线程安全、异步信号安全几个概念的理解

    由于前段时间,程序偶尔异常挂起不工作,检查后发现时死锁了,原因就是:在信号处理函数里面调用了fprintf. printf等io函数是需要对输出缓冲区加锁,这类函数对本身是线程安全的,但是对信号处理函 ...

  4. 关于js查找和筛选和循环的几种方式

    find(); find() 方法返回通过测试(函数内判断)的数组的第一个元素的值. find() 方法为数组中的每个元素都调用一次函数执行: 当数组中的元素在测试条件时返回 true 时, find ...

  5. PHP中的接口

    对象接口 使用接口(interface),可以指定某个类必须实现哪些方法,但不需要定义这些方法的具体内容. 接口是通过 interface 关键字来定义的,就像定义一个标准的类一样,但其中定义所有的方 ...

  6. 小菜鸟之java异常

    一.异常简介 什么是异常? 异常就是有异于常态,和正常情况不一样,有错误出错.在java中,阻止当前方法或作用域的情况,称之为异常. java中异常的体系是怎么样的呢? 1.Java中的所有不正常类都 ...

  7. 【DP 好题】Kick Start 2019 Round C Catch Some

    题目链接 题目大意 在一条数轴上住着 $N$ 条狗和一个动物研究者 Bundle.Bundle 的坐标是 0,狗的坐标都是正整数,可能有多条狗住在同一个位置.每条狗都有一个颜色.Bundle 需要观测 ...

  8. Spring Boot+CXF搭建WebService服务参考资料

    pom.xml文件引入包: <!--WerbService CXF依赖--> <dependency> <groupId>org.apache.cxf</gr ...

  9. JS中正则表达式应用

    判断字符串是否含有中文字符: var pattern = /.*[\u4e00-\u9fa5]+.*$/; var str = "asd按时"; console.log(patte ...

  10. C语言&*符号使用及大端法小端法测试

    工具:Microsoft Visual C++ 6.0 例子: int a = 1; int* b = &a; C语言规定a表示存储单元中的数据,&a表示存储单元的地址,b存储的就是a ...