Vue绑定内联样式问题

使用 v-bind:style 可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,看起来很直接在元素上写CSS:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>
</head>
<body>
  <div id="app">
    <div :style="{ 'color': color, 'fontSize': fontSize + 'px' }"></div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        color: 'red',
        fontSize: 14
      },
    });
  </script>
</body>
</html>

CSS属性名称使用驼峰命名(camelCase)或短横分隔命名(kebab-case),渲染后的结果为:

<div style="color: red; font-size: 14px">文本</div>

大多数情况下,直接写一串的样式不便于阅读和维护,所以一般写在data或computed里,以data为例写上面的示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>
</head>
<body>
  <div id="app">
    <div :style="styles"></div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        color: 'red',
        fontSize: 14 + 'px'
      },
    });
  </script>
</body>
</html>

应用多个样式对象时,可以使用数组语法:

<div :style="[styleA, styleB]">文本</div>

在实际业务中, :style的数组语法并不常用,因为往往可以写在一个对象里面; 而较为常用的应用是计算属性.

另外,使用:style时,Vue.js会自动给特殊的CSS属性名称增加前缀,比如transform.

总结

以上所述是小编给大家介绍的Vue绑定内联样式问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue项目中quill-editor带样式编辑器的使用方法

    Vue项目中quill-editor带样式编辑器的使用方法

    vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自己的视频,我们可以通过vue-quill-editor内部的某些方法进行更改 该方法使用了 element-ui 和 文件上传七牛 一.npm 安装 vue-quill-editor 二.在main.js中引入 import VueQuillEditor from 'vue-quill-editor

  • vue绑定class与行间样式style详解

    一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { background: #000; /*background: green;*/ } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { red_color : 'red', bg_color : 'b

  • vue实现tab切换外加样式切换方法

    实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none } #app { width: 504px; height: 300px; margin: 100

  • vue实现样式之间的切换及vue动态样式的实现方法

    vue实现样式之间的切换及vue动态样式的实现方法

    前言 既然我们选择了vue,那么在做东西时就不要想着去操作dom,所有的都交给vue来解决. 下面来说一个很简单但是很常用的效果,可能人人都会用到这样的需求 请看下图 导航栏的样式切换功能,如果我们使用jquery之类的东西来写,可能要写好多代码,那么我们用vue呢, 代码如下 html 附上vue中style与class绑定API <div id="wrap" class="box"> <div v-for="(list,index)

  • Vue单页应用引用单独的样式文件的两种方式

    Vue单页应用引用单独的样式文件的两种方式

    问题描述 对于.vue的文件来说,也是由结构.行为.样式三部分组成,在样式部分有个scoped的属性,也就是当前页面有效,当style标签内样式比较多时或者.vue文件之间有重复的时候,总感觉看起来不够整洁,所以就需要引入一些公共样式.下面就先说下如何引入单独的样式文件,这里就以CSS文件为例,之后再说下我的项目中的样式文件的划分 引入单独的样式文件 方式一 在main.js中引入静态资源,这种方法使得该样式文件被项目中的组件所共享 // The Vue build version to loa

  • Vue绑定内联样式问题

    使用 v-bind:style 可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,看起来很直接在元素上写CSS: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> </head> <body> <div id="app"> <div :sty

  • Vue绑定class和绑定内联样式的实现方法

    Vue绑定class和绑定内联样式的实现方法

    目录 绑定class 绑定内联样式 绑定class 方式一: 对象语法:给 v-bind:class传 一个对象,以动态地切换 class 当对象中某key对应的值为true时,该key做为className被添加到标签上 .box { width: 100px; height: 100px; background-color: gray; } .circle { border-radius: 50%; } <div id="app"> <div class=&quo

  • vue 内联样式style中的background用法说明

    在我们使用vue开发的时候 有很多时候我们需要用到背景图 这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去 注意 在vue中直接使用style时 花括号一定别忘记 还有就是你的url一定要加引号拼接 :style = ' { backgroundImage : " url ( " + item.img + " ) " } ' 完事! 补充: 好像还可以这样写 <div :style=" 'background-image' : ' url(

  • js获取内联样式的方法

    本文实例讲述了js获取内联样式的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,in

  • 关于javascript获取内联样式与嵌入式样式的实例

    关于javascript获取内联样式与嵌入式样式的实例

    通过style属性设置背景图案 <!--html--> <div id="change"> change color </div> /*css*/ #change { border: 1px solid black; width: 200px; height: 200px; text-align: center; line-height: 200px; } //js change.style.backgroundColor="purple&

  • 详解react内联样式使用webpack将px转rem

    背景 在开发react项目时,很多时候我们把style写在css.less.scss里,经过像postcss这样的配置处理,但有没有这样一种需求呢,像有些样式我们直接写在xml标签上style里,然后也能进行处理,如px2rem能将px转rem,是否在style上写也能实现. 思路 我们在webpack,/.(js|jsx)?$/这样babel-loader之前(webpack从右往左)加一个loader把需要转变的px进行替换,不就好了,先找找有没有这样的loader,我找了下没找到,只能自己

  • Vue模板内引入的组件样式覆盖失效原因及解决

    Vue模板内引入的组件样式覆盖失效原因及解决

    目录 模板内引入组件样式覆盖失效 问题原因 解决方案 vue样式被覆盖问题 模板内引入组件样式覆盖失效 作为一名刚接触Vue的菜鸟, 开发过程中遇到一些小坑又很难搜索的到, 还是记录下来. 分享给有遇到过类似问题的人. Vue项目中假设用到Vant.js这个UI库, 具体引入组件啥的我就不详细说了, 直接看代码: <template>   <div class="login">     <my-btn type="default">

  • 获取内联和链接中的样式(js代码)

    复制代码 代码如下: var head = document.getElementById( "box" ); // alert( head.style.background ) // alert( head.style.cssFloat || head.style.styleFloat ) // 获取float不一样 // head.style.fontSize = "30px" head.style.color = "#f00"; // (t

  • javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍)

    样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的<head></head>里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件. 下面

随机推荐