<!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. cef加载flash的办法

    cef有2种加载flash插件的方式, 1,npapi,这种方式是调用系统自带的flash插件,由于有安全性方面的问题,已经被新版cef禁用. 2,ppapi,也就是 pepper flash,这是谷 ...

  2. 如何为根分区扩容（centos7为例）

    linux系统所有的文件都是存放在根分区中的,如果根分区容量即将耗尽,我们就需要给根分区扩容,我们可以使用lsblk命令来查看,系统的根分区实际是逻辑卷,所以想要扩展根分区只要将逻辑卷扩容就可以了.此 ...

  3. OpenStack组件——Neutron网络服务(1)

    1.neutron 介绍: 1)Neutron 概述 传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备:而云环境下的网络已经变得非常复杂,特别是在多租户场景里,用户随时都可能需要 ...

  4. DARTS代码分析（Pytorch）

    最近在看DARTS的代码,有一个operations.py的文件,里面是对各类点与点之间操作的方法. OPS = { 'none': lambda C, stride, affine: Zero(st ...

  5. 应用安全 - 工具 | 平台 - gitlist - 漏洞 - 汇总

    简介 用途 Github仓库查看器 CVE-2014-4511 Date 类型 远程代码执行 影响范围 gitlist 0.4.0及之前版本

  6. 在C语言中函数及其调用过程

    目录 函数 C语言中的变参函数 函数的本质是什么 内存区域的区分技巧 函数的调用过程 栈帧的概念 调用过程细节 按照约定传参 函数 如果一个函数有声明没实现,那么就会出现链接错误: 以上代码会出现链接 ...

  7. nginx一些高级配置

    参数: https://www.wangbokun.com/%E8%BF%90%E7%BB%B4/2018/07/21/Nginx.html   免费证书等 1/ nginx代理hue限制上传文件大小 ...

  8. 简单nginx代理配置

    nginx.conf: # For more information on configuration, see:# * Official English Documentation: http:// ...

  9. SIFT图像配准 python3.6 + opencv3.3代码

    opencv3.x 中部分函数有改变: 1. SIFT:可以采用help(cv2.xfeatures2d)查询 2.drawKeypoints: 同样采用help()方法查询 opencv3 版本si ...

  10. （转）C++ bitset用法

    今天做题发现要用到bitset,找到一篇介绍的巨好的文章. 转载自:https://www.cnblogs.com/magisk/p/8809922.html C++的 bitset 在 bitset ...