我们可以在 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. pat 甲级 1127. ZigZagging on a Tree (30)

    1127. ZigZagging on a Tree (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue ...

  2. Shell 环境中的输入输出重定向

    Linux Shell 环境中的输入输出重定向,用符号<和>来表示.0.1和2分别表示标准输入.标准输出和标准错误. 1.重定向标准输出到文件: cat fo > foo.txt 2 ...

  3. js禁用"Backspace"键（即禁止网页倒退）

    项目遇到的一个问题一个普通网页,如果这个网页上没有焦点的话,那么点击"Backspace"键的时候,网页会回退(倒退到上一个网页),这样就会就有一个问题,当我在一个输入框进行输入的 ...

  4. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---25

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  5. 八、 Java程序初始化的顺序（一）

    今天在写构造器方法的时候,遇到了一个小问题,由这个问题引发了一连串的思考,在一个Java类中变量与类的初始化执行顺序是什么样的呢?## 发现问题 class Student{ private Stri ...

  6. hdu 4859(思路题)

    Goffi and Squary Partition Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Ja ...

  7. android 集成友盟分享之后，想自定义分享面板的看过来

    第一种情况 首先上传一张默认的友盟分享的效果图 看起来还不错,但是总是有这样那样的原因,需要我们对默认效果做出一些改变. 第二种情况 如果你想做出下面的效果: 或者这样的效果 : 总之上面的效果总是在 ...

  8. 洛谷 P1865 A % B Problem[筛素数/前缀和思想/区间质数个数]

    题目描述 区间质数个数 输入输出格式 输入格式: 一行两个整数 询问次数n,范围m 接下来n行,每行两个整数 l,r 表示区间 输出格式: 对于每次询问输出个数 t,如l或r∉[1,m]输出 Cros ...

  9. JMeter性能测试常用之事务控制器实例

    通常进行性能测试时,我们一般仅考虑主要的数据返回,不考虑页面渲染所需要的数据(例如:css.js.图片等).但当我们需要衡量打开一个页面(页面渲染完成)的性能时,我们就需要考虑完成页面渲染所需要的图片 ...

  10. luogu P3116 [USACO15JAN]会议时间Meeting Time

    题目描述 Bessie and her sister Elsie want to travel from the barn to their favorite field, such that the ...