Vue绑定内联样式问题

最新推荐文章于 2024-03-12 20:29:27 发布

didaimi9422

最新推荐文章于 2024-03-12 20:29:27 发布

阅读量275

点赞数

文章标签： javascript 前端移动开发 ViewUI

原文链接：http://www.cnblogs.com/veromcae/p/10012931.html

版权

使用 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),渲染后的结果为:

1	`<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>

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

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

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

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


jQuery高级进阶视频教程附讲义源码 10课
JQuery快速学习视频教程附讲义源码 10课
web前端综合演练公开课视频教程附源码讲义 22课
AJAX跨域解决方案：JSONP讲义源码 5课
AJAX入门AJAX原理和封装附讲义源码 7课
妙味课堂web前端HTML5入门高清视频附源码 38课
妙味课堂web前端JavaScript正则表达式高清视频附源码 11课
妙味课堂web前端CSS3.0入门高清视频附源码 22课
妙味课堂VIP全套视频前端初窥篇web前端开发入门到精通高清附源码
妙味课堂VIP课程移动前端仿ios滑屏切换开发案例高清视频附源码 4课
妙味课堂VIP课程JavaScript算法与数据结构高清视频教程附源码 10课
妙味课堂VIP课程HTML5微信H5游戏打怪游戏开发高清视频教程附源码 21课
妙味课堂XHTML+CSS2整站布局设计视频教程高清附源码 12课
李炎恢jQuery视频教程
html5移动app开发框架jqueryMobile视频教程
兄弟连HTML5+css3视频教程
HTML5网页设计入门系列课程
后盾网html5视频教程
HTML5+css3实例讲解
React高级实战 – 打造大众点评 WebApp