我们可以在 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. Javaweb测试

    1.建立web 工程 输入Project name.然后点击finish. 2.右键点击WebContent-New-JSP File,新建jsp文件. 3.然后编写一个jsp登录的程序 <%@ ...

  2. 在做展开功能的时候，字体变多了，字体会变大的bug的解决方案

    在没有限制高度的情况下字体会变大,要做展开效果,当然不能限制高度. 解决方案是,加个max-height就可以解决这个问题

  3. 51Nod 1028 大数乘法 V2

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1028 分析: FFT/NTT板子题... 代码: NTT板子: #inc ...

  4. Mongoose 表实例

    /********** 用户表 BY Jaysir 2015.6.21 *********** *********** 可搜索以下关键词来查看未实现功能 *********** *********** ...

  5. Ajax 控件 的使用 以及js调用后台方法【自己总结一下】

    原文发布时间为:2009-05-16 -- 来源于本人的百度文章 [由搬家工具导入] 源码：http://download.csdn.net/source/1340120   （js调用后台方法只在源 ...

  6. 利用C#原有函数对数组进行降序排列

    原文发布时间为:2009-03-04 -- 来源于本人的百度文章 [由搬家工具导入] 利用 Array类的静态方法 Sort可以对数组进行升序排列。如下：       Array.Sort(数组名); ...

  7. vim的使用技巧--模式入门

    vim作为编辑器之神,一直都是程序爱好者的最爱,与一般的编辑器的最大不同就是对模式的把握更加的细腻和得当.普通编辑主要分为使用菜单和使用键盘,菜单就是输入命令作用,键盘主要用来输入文本,中间穿插着使用 ...

  8. Scrapy学习-21-信号量

    scrapy信号量 定义 Scrapy使用信号来通知事情发生.您可以在您的Scrapy项目中捕捉一些信号(使用 extension)来完成额外的工作或添加额外的功能,扩展Scrapy. 虽然信号提供了 ...

  9. 转：[小北De编程手记] : Selenium For C# 教程目录

    写<Selnium For C#>系列文章的初衷是因为有很多朋友问我应该从哪里开始学习自动化测试,于是就为大家写下了这个系列的文章,希望对你有些帮助吧.而我想表达的是Selenium(同时 ...

  10. LeetCode OJ-- Substring with Concatenation of All Words ***

    https://oj.leetcode.com/problems/substring-with-concatenation-of-all-words/ 找S中子串,每个元素都在T中出现了,且所有T中元 ...