<!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. Winform之跨线程更新UI

    Winform之跨线程更新UI 使用`Invoke`或者`BeginInvoke`与UI线程交互示例 参考及源码 使用Invoke或者BeginInvoke与UI线程交互示例 private void ...

  2. idea Ctrl+Alt+T 快捷键失效

    idea快捷键 CTRL+ALT+T  把选中的代码放在 TRY{} IF{} ELSE{} 里 这个快捷键失效了,显然是热键冲突,查看了喜欢占热键的输入法.词典.微信.qq.都没找到占用,最后发现 ...

  3. java：solr

    1.solr(数据导入solr自带数据库):   ImportItemController.java: package com.solr.controller; import org.springfr ...

  4. JAVA_day2_运算符

    Java运算符 一.算术运算符 ++ 和 -- 既可以出现在操作数的左边,也可以出现在右边,但结果不同 1.++在左边,a先自增1再赋值给b int a=3 int b=++a 2.++在右边,先赋值 ...

  5. SQL-T

    Mysql函数.语句记录 增加 INSERT INTO table_name (列1, 列2,...) VALUES (值1, 值2,....) 删除 DELETE FROM 表名称 WHERE 列名 ...

  6. Unity中的动画系统和Timeline(1) 普通动画创建

    学习使用版本:Unity2017.1.1 目标:给一个Cube创建动画 一:第一种创建方法 1 Windows —— Animation,打开Aniamtion动画界面,此时显示 因为此时没有任何动画 ...

  7. ServletContainerInitializer

    在web容器启动时为提供给第三方组件机会做一些初始化的工作,例如注册servlet或者filtes等,servlet规范中通过ServletContainerInitializer实现此功能. 每个框 ...

  8. KVM虚拟化原理

    CPU虚拟化 KVM虚拟化是需要硬件支持的.我们可以用 egrep -o '(vmx|svm)' /proc/cpuinfo 来查看是否支持CPU虚拟化. 虚拟机中每一个vCPU对应qemu-kvm中 ...

  9. 保存cookie 到本地

    #encoding: utf-8 from urllib import requestfrom http.cookiejar import MozillaCookieJar #创建一个cookieja ...

  10. python 连接Oracle 的步骤

    1. 安装 cx_Oracle pip install cx_Oracle 2.配置  oci.dll 与 oraociei11.dll 添加到环境变量path中 下载地址:百度搜索下载,Oracle ...