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

<!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. 2025战略，中秋送福利！免费开源ERP Odoo Windows 一键傻瓜式安装版发布

    概述 为了帮助更多的小白,能够快速的体验Odoo的强大功能,针对国内大多数小白用户无法快速直接体验Odoo的尴尬,开源智造呕心沥血,历经数百次的测试和整合终于赶在中秋节这天将Odoo所需要的复杂运行环 ...

  2. 一目了然呀的VS2017 Live Test

    刚刚试用了一下VS2017中的单元测试,发现,这一次,覆盖测试会自动标记出来.不用像以前一样要他细检查了.这次会自动帮你全部标记出来. 新建单元测试,使用MS的单元测试方案(VSTS使用的时候方便.) ...

  3. bug生命周期&bug跟踪处理

    一.BUG BUG:软件的缺陷 1.BUG的定义:----与软件测试的目的对应 软件的BUG,狭义概念是指软件程序的漏洞或缺陷,广义概念除此之外还包括测试工程师或用户所发现和提出的软件可改进的细节.或 ...

  4. 第六周LINUX学习笔记

    DNS服务 DNS:Domain Name Service //协议     实现:BIND(Berkeley Internet Name Domain)     监听端口:        UDP:5 ...

  5. windows之如何把iso文件转换为VHD文件

    (1)Convert-WindowsImage.ps1的下载路径: 链接:https://pan.baidu.com/s/18duFQFW8T_yI2JeQ1lhJgQ 提取码:b5ps autoun ...

  6. MIP开发教程(一) MIP-CLI工具安装与环境部署

    依赖安装 安装 MIP-CLI 创建开发文件结构 1. 依赖安装 MIP-CLI 使用 NPM 安装,依赖 node 环境: node 安装-windows node 安装-mac MIP-CLI 开 ...

  7. IIS Express 配置缓存位置

    Please refer to the three configure files to check if they contains the rule setting. "%Program ...

  8. java虚拟机内存区域

    java虚拟机运行时数据 程序计数器 是一块较小的内存空间,属于线程私有的内存. 用来记录正在执行的虚拟机字节码指令的地址. 每个线程都需要一个独立的程序计数器,各个线程间的计数器互不影响,独立存储. ...

  9. redis使用场景和java测试案例

    redis数据结构和使用场景 strings lists sets sort sets hashes strings token session validateCode 分布锁 lists 最近联系 ...

  10. Redis学习笔记~分布锁的使用

    回到目录 分布锁主要用在多进程共同访问同一个资源时候,用来保持同一时间段只能有一个进程执行,同时避免了并发冲突的出现,这在很多场景都会用到,像秒杀库存,抽奖库存,多操作者处理一家公司等. void T ...