黑马程序员技术交流社区

标题: 【上海校区】Vue.js 动态绑定CSS样式 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-7-31 10:03
标题: 【上海校区】Vue.js 动态绑定CSS样式

第一种方法：

v-bind:class="{a:b,c:b}"     a c 代表CSS样式表里相应的样式名       b 代表true(启用此样式)/false(不启用此样式)

html

• 
  
      <!--vue-app是根容器-->
  
  
• 
  
      <div id="vue-app">
  
  
• 
  
          <input type="button" v-on:click="a=!a" v-bind:class="{changeColor:a,changeWidth:a}" value="change!">
  
  
• 
  
      </div>
  
  
  

  css

• 
  
  .changeColor{
  
  
• 
  
      background: brown;
  
  
• 
  
      color: #ffffff;
  
  
• 
  
  }
  
  
• 
  
  .changeWidth{
  
  
• 
  
      width: 200px;
  
  
• 
  
  }
  
  
  

   js

• 
  
  //实例化vue对象
  
  
• 
  
  new Vue({
  
  
• 
  
      el:"#vue-app",
  
  
• 
  
      data:{
  
  
• 
  
          a:false
  
  
• 
  
      },
  
  
• 
  
      methods:{},
  
  
• 
  
      computed:{}
  
  
• 
  
  });
  
  
  

效果图

点击按钮后

再次点击按钮后将恢复到初始样子

第二种方法

html

• 
  
      <!--vue-app是根容器-->
  
  
• 
  
      <div id="vue-app">
  
  
• 
  
          <input type="button" v-on:click="a=!a" v-bind:class="change" value="change">
  
  
• 
  
      </div>
  
  
  

css文件与上面一样

JS

• 
  
  //实例化vue对象
  
  
• 
  
  new Vue({
  
  
• 
  
      el:"#vue-app",
  
  
• 
  
      data:{
  
  
• 
  
          a:false
  
  
• 
  
      },
  
  
• 
  
      methods:{},
  
  
• 
  
      computed:{
  
  
• 
  
          change:function(){
  
  
• 
  
              return {
  
  
• 
  
                  changeColor:this.a,
  
  
• 
  
                  changeWidth:this.a
  
  
• 
  
              }
  
  
• 
  
          }
  
  
• 
  
      }
  
  
• 
  
  });
  
  
  

效果图与上面一样

---

作者: wuqiong    时间: 2018-7-31 10:25

---

作者: 不二晨    时间: 2018-7-31 11:51
奈斯，很赞

---

作者: 梦缠绕的时候    时间: 2018-7-31 12:03

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2