×
首页编程语言正文

在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 v-bind:class 里面绑定变量的值是 class , 指向对应的 类选择器 样式表, 而 v-bind:style 里面绑定的变量的值是一个以 css 属性名 为 键名, 以 css 属性值 为键值 的 键值对, 这种键值对需要以 对象 的形式传进去, 也可以使用 数组 将多个 样式表对象 传进去. 以下简单展示了两种使用方法实现同样效果.

:class

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> 
  <title>Vue Test</title> 
  <style> 
      .style1 { 
          width: 100px; height: 100px; background-color: tomato; 
      } 
      .style2 { 
          margin: 0 auto; 
          border-radius: 15px; 
      } 
  </style> 
</head> 
<body> 
    <div id="app"> 
        <div v-bind:class="{style1,style2}"></div> 
    </div> 
    <script> 
        var vApp = new Vue({ 
            el: "#app", 
            data: { 
                style1: "style1", 
                style2: "style2" 
            } 
        }) 
    </script> 
</body> 
</html>

 

:style

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> 
  <title>Vue Test</title> 
  <style> 
      .style1 { 
          width: 100px; height: 100px; background-color: tomato; 
      } 
      .style2 { 
          margin: 0 auto; 
          border-radius: 15px; 
      } 
  </style> 
</head> 
<body> 
    <div id="app"> 
        <div v-bind:style="[style1,style2]"></div> 
    </div> 
    <script> 
        var vApp = new Vue({ 
            el: "#app", 
            data: { 
                style1: { 
                    "width": "100px", 
                    "height": "100px", 
                    "background-color": "tomato" 
                }, 
                style2: { 
                    "margin": "0 auto", 
                    "border-radius": "15px" 
                } 
            } 
        }) 
    </script> 
</body> 
</html>

 

效果

 

评论关闭
IT源码网
IT源码网 VUE

微信公众号号：IT虾米 （左侧二维码扫一扫）欢迎添加！