对象就是无序键值对的集合

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

</head>

<body>

    <div id="app">

        <h1 on-cloak>{{ msg }}</h1>

        <h1 :style="{color: 'red', 'font-width': 200}">周日被我射熄火了，所以今天是周一</h1>

        <h1 :style="styleObj2">起床起床，老板喊你加班了</h1>

        <h1 :style="styleObj3">小乔，要努力变强</h1>

    </div>

</body>

<script>

    let vm = new new Vue({

        el: '#app',

        data: {

            msg: '瞅你咋地？再瞅一个试试',

            styleObj1: {color: 'red', 'font-width': 200},

            styleObj2: {'font-style': 'italic'},

            styleObj3: {color: 'skyblue', 'font-width': 400}

        },

        methods: {

        }

    })

</script>

</html>

Vue.js05：vue内联样式的更多相关文章

  1. Vue.js style(内联样式)

    Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...

  2. Vue.js绑定内联样式

    1.对象语法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. vue.js中内联样式style三元表达式

    <span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...

  4. vue 内联样式style中的background

    在我们使用vue开发的时候   有很多时候我们需要用到背景图 这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去 注意  在vue中直接使用style时 花括号一定别忘记 还有就是你的url一定 ...

  5. Vue 内联样式的数据绑定

    Vue 内联样式的数据绑定 之前学的是数据绑定 class,现在可以将数据绑定到 style 中. <div id="app"> <div v-bind:styl ...

  6. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  7. vue 绑定 class 和 内联样式（style）

    <div id="app31"> <!--多个属性 ,号隔开--> <!-- v-bind:style="{fontSize: fontSi ...

  8. Vue 内联样式

    前置说明 Vue 绑定HTML 全局属性style,可以动态地改变属性值.这里就不讲内联样式的基础了,具体轻查看官网文档 Class 与 Style 绑定. 主要分为以下两个步骤进行: v-bind ...

  9. v-bind指令动态绑定class和内联样式style

    动态绑定class—概述 数据绑定(v-bind指令)一个常见需求是操作元素的 class 列表.因为class是元素的一个属性,我们可以用 v-bind 处理它们 我们只需要计算出表达式最终的字符串 ...

  10. DOM与元素节点内联样式

    获取.设置及移除单个内联 CSS 属性 每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...

随机推荐

  1. [转]webstorm中js文件被识别成txt类型

    问题描述: webstorm中index.js文件被识别成txt格式,如下图. 原因: webstorm中js文件被识别成txt文件,原因在于txt类型识别了以当前js文件名命名的模式. 解决办法: ...

  2. 第一章 渲染调度来龙去脉——插入自己的shader

    总有人会问,这个或者那个功能怎么弄,或者看到别人做了什么酷炫的效果也想仿造.其实,功能的实现无非两种: 1.调用Cesium现有的API组合实现:往往照猫画虎,还存在性能不过关的问题,绕了半天其实终究 ...

  3. ORACLE字符集修改ORA-02374\ORA-12899\ORA-02372

    IMPDP时部分日志显示这个警告ORA-02374: conversion error loading table "MEMXXX"."T_MEMBER_XXXX&quo ...

  4. 初识Djiango

    老师的博客:点我 内容主要是看老师的博客 下面是自己的写的某些自己当时不太懂的. 关于Django的版本的问题 Django官网下载页面 在官网上显示lts的是表示支持长期版本.所以最好下载1.11版 ...

  5. GitHub开源：SQLite 增强组件 Sheng.SQLite.Plus

    Github:https://github.com/iccb1013/Sheng.SQLite.Plus Sheng.SQLite.Plus 是一个对直接使用 ADO.NET 方式操作 SQLite ...

  6. Linux常用命令速查-汇总篇

    Linux常用命令速查-用户管理 Linux常用命令速查-文件管理 Linux常用命令速查-系统监控 Linux常用命令速查-网络管理 Linux常用命令速查-定时任务 Linux常用命令速查-Vim

  7. Prometheus安装和配置node_exporter监控主机

    Node_exporter是可以在* Nix和Linux系统上运行的计算机度量标准的导出器. Node_exporter 主要用于暴露 metrics 给 Prometheus,其中 metrics ...

  8. 【Android Studio安装部署系列】二十七、Android studio修改项目名称和包名

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 实际项目开发中可能碰到项目名称写错了或者需要修改,而且包名可能也想要修改,那么如何操作呢. 本文是在Android Studio3. ...

  9. group by搭配 order by解决排序问题

    问题 Ftravel_id Facct_no Froute_code Fmodify_time 41010020180725102219102000010452 1359c027b0a15266418 ...

  10. 版本控制工具——Git常用操作（上）

    本文由云+社区发表 作者:工程师小熊 摘要:用了很久的Git和svn,由于总是眼高手低,没能静下心来写这些程序员日常开发最常用的知识点.现在准备开一个专题,专门来总结一下版本控制工具,让我们从git开 ...