脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue绑定内联样式

Vue绑定内联样式问题

 更新时间：2018年10月17日 11:43:11   作者：一叶扁舟丶  
这篇文章主要介绍了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绑定内联样式问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

    详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

    这篇文章主要介绍了Vue+Element动态表单动态表格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 一文带你搞懂V8垃圾回收系统

    一文带你搞懂V8垃圾回收系统

    在V8中，JavaScript的内存空间分为栈（Stack）和堆（Heap）两部分，垃圾回收的基本思路是：查找内存中的所有变量，看哪些已经不再需要，然后释放这些变量所占用的内存，本文就给大家梳理一下V8垃圾回收系统,需要的朋友可以参考下
    2023-07-07
  • Vue移动端实现图片上传及超过1M压缩上传

    Vue移动端实现图片上传及超过1M压缩上传

    这篇文章主要为大家详细介绍了Vue移动端实现图片上传及超过1M压缩上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • vue-cli 为项目设置别名的方法

    vue-cli 为项目设置别名的方法

    这篇文章主要介绍了vue-cli 为项目设置别名的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 前端文件导出设置responseType为blob时遇到的问题及解决

    前端文件导出设置responseType为blob时遇到的问题及解决

    这篇文章主要给大家介绍了关于前端文件导出设置responseType为blob时遇到的问题及解决方法,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue axios调用接口方法报错500 internal server error的两种解决方法

    vue axios调用接口方法报错500 internal server err

    前端使用axios 访问后端接口时报错,在浏览器中点击红色的报错数据,本文给大家分享vue axios调用接口方法报错500 internal server error的两种解决方法,感兴趣的朋友一起看看吧
    2023-10-10
  • vue2.x中$attrs的使用方法教程

    vue2.x中$attrs的使用方法教程

    正常情况下Vue推荐用props向子组件参数,但是在特定场景下,使用$attrs会更方便,下面这篇文章主要给大家介绍了关于vue2.x中$attrs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vue3搭建组件库开发环境的示例详解

    Vue3搭建组件库开发环境的示例详解

    这篇文章给大家分享Vue3搭建组件库开发环境，给大家讲解依次搭建组件库、example、文档、cli，本文内容是搭建组件库的开发环境的过程，感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • vue计算属性无法监听到数组内部变化的解决方案

    vue计算属性无法监听到数组内部变化的解决方案

    今天小编就为大家分享一篇vue计算属性无法监听到数组内部变化的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue ElementUI this.$confirm async await封装方式

    Vue ElementUI this.$confirm async await封

    这篇文章主要介绍了Vue ElementUI this.$confirm async await封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09

最新评论