Skip to content
This repository was archived by the owner on May 24, 2019. It is now read-only.

Dynamic CSS

Jump to bottom
Pascal edited this page Sep 3, 2017 · 4 revisions

Vue.js documentation: https://vuejs.org/v2/guide/class-and-style.html

https://github.com/oanstein/VueJS-Complete-Guide-Code/tree/master/01_dom_interaction/13_dynamic_css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<style>
    .demo {
      width: 100px;
      height: 100px;
      background-color: gray;
      display: inline-block;
      margin: 10px;
  }
  .red {
    background-color: red;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}
</style>
<body>
    <div id="app">
      <div class="demo" @click="attachRed = !attachRed" :class="divClasses"></div>
      <div class="demo" :class="{red: attachRed}"></div>
      <div class="demo" :class="[color, {red: attachRed}]"></div>
      <hr>
      <input type="text" v-model="color">
    </div>


  <script src="https://unpkg.com/vue"></script>
  <script>
    new Vue({
     el: '#app',
     data: {
        attachRed: false,
        color: 'green'
    },
    computed: {
        divClasses: function(){
            return {
                red: this.attachRed,
                blue: !this.attachRed
            }
        }
    }
});
</script>
</body>
</html>

Index

Clone this wiki locally