我们可以在 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. linux系统初始化——busybox的inittab文件格式说明

    busybox的inittab文件格式说明 要写自己的inittab,需要理解busybox的inittab文件格式. busybox的inittab文件与通常的inittab不同,它没有runlev ...

  2. ionic2如何调用百度地图

    使用ionic2接入百度地图 在index.html中引入百度地图的js类库 <script type="text/javascript" src="http:// ...

  3. root Android 模拟器

    参考文档:http://blog.csdn.net/xbalien29/article/details/22661479 本文以2.3.3版本系统为目标. 一 准备工作 首先我们需要准备3样工具:su ...

  4. kvm虚拟化实践

    .环境初始化 [root@localhost ~]# hostnamectl set-hostname kvm-node1 [root@kvm-node1 ~]# sed -i '/SELINUX=/ ...

  5. iOS - 毛玻璃效果封装

    #import <UIKit/UIKit.h> #import <Accelerate/Accelerate.h> @interface UIImage (TY_ImageEd ...

  6. django + gunicorn + supervisor

    在服务器上跑着一个Django项目,想用supervisor管理起来,遇到一个小问题,记录一下本来启动Django项目的命令是用的manage.py ,  但是这中方法有个很神奇的坑,就是ctrl + ...

  7. 《30天学习30种新技术》-Day 15：Meteor —— 从零开始创建一个 Web 应用

    目录:https://segmentfault.com/a/1190000000349384 原文: https://segmentfault.com/a/1190000000361440 到目前为止 ...

  8. react 使用antd导航组件实现事件传递并局部刷新DOM

    我们要实现一个通过点击顶部导航来查询左侧菜单的一个功能 在这个功能中,我们要应用到onClick={this.headNavMenuList.bind(this)}方法来传递点击 不同按钮来传递不同的 ...

  9. Codeforces 631B Print Check (思维)

    题目链接 Print Check 注意到行数加列数最大值只有几千,那么有效的操作数只有几千,那么把这些有效的操作求出来依次模拟就可以了. #include <bits/stdc++.h> ...

  10. asp.net获取URL方法

    方法如下: Request.Url.ToString()获取完整url(协议名+域名+站点名+文件名+参数):https://localhost:44300/WebForm1.aspx?abc=123 ...