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

<!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. 使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变

    clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法.想象一下你在Photoshop中勾勒路径的场景.MDN上是这样介绍 clip-p ...

  2. box-shadow内阴影、外阴影

    外阴影: box-shadow:X轴  Y轴  Rpx  color; 属性说明(顺序依次对应):阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色 内阴影: bo ...

  3. Cesium 海拔 经纬度 展示

    通过参考http://gishome.net.cn/cesium/cesium-coordinates/,整理修改后 <!DOCTYPE html><html lang=" ...

  4. Android 启动优化

    对与Android的项目来说,app的启动速度是非常重要的.因为用户打开你的app给别人的第一体验就是打开软件的速度.但是app的启动速度是比较难以缩短的,因为一般来说开发者在app的启动入口都会创建 ...

  5. RxJava操作符的简单使用

    一.准备工作在app的build.gradle文件下的dependencies中添加依赖: compile 'io.reactivex:rxjava:1.3.0' compile 'io.reacti ...

  6. 解决小米手机USB安装apk时AS报错：INSTALL_FAILED_USER_RESTRICTED

    今天,直接用AS在小米手机上运行安装的时候总是报错:INSTALL_FAILED_USER_RESTRICTED,于是乎,通过以下方式解决: 在开发者选项将USB安装打开,然后,哈,解决了.记录一下.

  7. Windows Server 2012 R2安装Oracle 11g问题

      1.[INS-13001]环境不满足最低要求 如图:   oracle11g早于Windows Server 2012 R2 解决方法:找到解压目录../win64_11gR2_database\ ...

  8. windows远程桌面神器

    近需要远程家庭版的WINDOWS系统的笔记本,发现它竟然没有远程桌面功能,系统属性下面根本没有远程桌面选项. 于是上网搜解决方案,找到下面这个神器,名字叫RDPwrap,不但能开通Vista以后任何版 ...

  9. 详细介绍Spring Boot 2.0的那些新特性与增强

    以Java 8 为基准 Spring Boot 2.0 要求Java 版本必须8以上, Java 6 和 7 不再支持. 内嵌容器包结构调整 为了支持reactive使用场景,内嵌的容器包结构被重构了 ...

  10. [JLOI2016] 成绩比较

    推石子 首先设\(d[i]=\sum_{t=1}^{U[i]}t^{n-R[i]}(U[i]-t)^{R[i]-1}\),即第\(i\)门课程分数的合法分布方案数: 然后设\(f[i,j]\)表示前\ ...