我们可以在 v-bind:style 直接设置样式：

直接添加样式属性

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px',background:'red' }">内联样式</div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    activeColor: 'green',

    fontSize: 30

  }

})

</script>

</body>

</html>

效果如图：

绑定到样式对象

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <div v-bind:style="styleObject">绑定样式对象</div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    styleObject: {

      color: 'green',

      fontSize: '30px',

      background:'red'

    }

  }

})

</script>

</body>

</html>

效果如图：

多样式绑定

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <div v-bind:style="[baseStyles, overridingStyles]">多样式绑定</div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    baseStyles: {

      color: 'green',

      fontSize: '30px',

      background:'red'

    },

    overridingStyles: {

      'font-weight': 'bold'

    }

  }

})

</script>

</body>

</html>

效果如图：

注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

VueJS样式绑定之内联样式v-bind:style的更多相关文章

  1. vue绑定内联样式

    v-bind:style 的对象语法十分直观--看着非常像 CSS ,其实它是一个 JavaScript 对象. CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case) ...

  2. wxss--外联样式与内联样式

    外联样式 有样式表a.wxss和index.wxss如下: /**a.wxss**/ .container1{ border: 1px solid #000; } /**index.wxss**/ . ...

  3. Vue.js绑定内联样式

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

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

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

  5. Vue.js学习 Item6 -- Class 与 样式绑定

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此 ...

  6. Vue.js：样式绑定

    ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...

  7. 一起学Vue之样式绑定

    在前端开发中,设置元素的 class 列表和内联样式是基本要求.本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正. 概述 Vue操作元素的 class 列 ...

  8. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  9. web前端——Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...

随机推荐

  1. BZOJ 4569 [Scoi2016]萌萌哒 ——ST表 并查集

    好题. ST表又叫做稀疏表,这里利用了他的性质. 显然每一个条件可以分成n个条件,显然过不了. 然后发现有许多状态是重复的,首先考虑线段树,没什么卵用. 然后ST表,可以每一层表示对应的区间大小的两个 ...

  2. 从jekyll转向hexo

    当年选择jekyll是因为看中了HCZ Material theme这个主题，折腾了很久才把博客搭建好，后来周边人准备些博客的时候已经不推荐使用jekyll了，推荐hexo给好几个人，不用他们折腾，（ ...

  3. this.$router.push() 在新窗口怎么打开

    参考:https://blog.csdn.net/qyl_0316/article/details/86550361

  4. 【04】【转】Nodejs学习笔记（四）--- 与MySQL交互（felixge/node-mysql）

    目录 简介和安装 测试MySQL 认识一下Connection Options MYSQL CURD 插入 更新 查询 删除 Nodejs 调用带out参数的存储过程,并得到out参数返回值 结束数据 ...

  5. Docker分层原理与内部结构

    转自:1 :   https://www.csdn.net/article/2015-08-21/2825511 2:    http://blog.51cto.com/wzlinux/2044797 ...

  6. web服务之http

    HTTP协议 HTTP协议,全称HyperText Transfer Protocol即超文本传输协议,是互联网中最常用的一种网络协议.HTTP协议是互联网上的通信协议方案之一.它有很多的应用, 但最 ...

  7. What and How in an Application

    Basically, two concerntrations: 1. What: business docs and prototype design 2. How: technical docs a ...

  8. Day 32 process&threading_4

    线程和进程 4 一.multiprocessing模块 multiprocessing包是Python中的多进程管理包. 与threading.Thread类似,它可以利用multiprocessin ...

  9. C++ 找不到方法标识符

    其实原因是这个CPP并没有面向对象的结构. 所以进行编译时是“顺序编译”的,而main函数的定义又在A的定义之前.自然找不到标识符了.

  10. AC日记——[Sdoi2016]数字配对 bzoj 4514

    4514 思路: 很受伤现在,,测了那么多次不过的原因就是因为INF不够大: 解法有两种: 解法1: 把n个点按照质因数个数为奇或偶分为两个点集(很容易就可以想到): 然后,按照题目连边跑最大费用流: ...