<!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. 【一个开发设想】开发一个游戏向时间管理APP

    什么是游戏向时间管理呢? 首先我们要做的是时间管理.为了更好地利用时间,摆脱拖延症. 其次是游戏向.就是利用主线任务.支线任务.每日任务的方式展现,一般来讲,没人会讨厌玩游戏.更何况玩这个“游戏”是为 ...

  2. YAML基础知识及搭建一台简洁版guestbook

    一,前言 前面我们已经搭建过简易版k8s集群了,在此基础上可以搭建一个简洁版guestbook ,以便来学习k8s创建pod的整个过程. 二,在此之前,我们还需要学习一下YAML基础知识 YAML 基 ...

  3. 【C/C++】什么是类型安全

    什么是类型安全 转自:http://hi.baidu.com/chenfalei/blog/item/f33ac0133500ac21dd540186.html 编程语言的最终梦想:静态类型安全 常听 ...

  4. 【Linux开发】linux设备驱动归纳总结（九）：1.platform总线的设备和驱动

    linux设备驱动归纳总结(九):1.platform总线的设备和驱动 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  5. 使用mint ui 的picker解决城市三级联动

    <mt-popup v-model="popupVisible" position="bottom"> <div class="po ...

  6. ssh配置互信不成功，两台服务器有一台需要输入密码

    在客户现场,某国产平台,配置机器互信时发现,A可以免密访问B,而B不能免密访问A,且B不能免密访问B,进行了下面的几个处理后搞定. 1)确定目录权限:/root/ 755/root/.ssh 700/ ...

  7. CF171C 【A Piece of Cake】

    遵从题意枚举暴力读人n,再求出$\sum^n_1a[i]*i$然后输出答案,(记得开个long long以免炸掉)以下是代码: #include<bits/stdc++.h> using ...

  8. 洛谷 P3384树链剖分 题解

    题面 挺好的一道树剖模板: 首先要学会最模板的树剖: 然后这道题要注意几个细节: 初始化时,seg[0]=1,seg[root]=1,top[root]=root,rev[1]=root; 在线段树上 ...

  9. 从入门到自闭之Python三大器--生成器

    1.什么是生成器 核心:生成器的本质就是一个迭代器 迭代器是python自带的的 生成器是程序员自己写的一种迭代器 编写方式: 基于函数编写 推导式编写 def func (): print(&quo ...

  10. HTML5网页文档结构

    2.1     Web标准 Web标准,使得Web开发更加容易.Web标准由万维网联盟(W3C)制定. 2.1.1          Web标准概述 Web标准的最终目的就是保证每个人都有权力访问相同 ...