SOURCE

console 命令行工具 X clear

                    
>
console
new Vue ({
  el: '#app',
  data: {
    Classes: {
			highlight: false,
			nohighlight: true
    },
    float: 'float',
    blue: 'blue',
    userClass: '',
    isVisible: true,
    myStyle: {
      width: '100px',
      height: '100px',
      backgroundColor: 'red'
    },
    jindutiaoColor: {
      width: '0px',
      backgroundColor: 'red'
    }
  },
  computed: {
  	
	},
  watch: {
    
  },
  methods: {
    startEffect: function() {
      var vm = this
      setInterval(function() {
        vm.Classes.highlight = !vm.Classes.highlight
        vm.Classes.nohighlight = !vm.Classes.nohighlight
      }, 1000)
    },
    kaishi: function() {
      var vm = this
      var width = 0
      setInterval(function(){
        width = width + 10
        vm.jindutiaoColor.width = width + 'px'
      }, 500) 
    }
	}
})
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <button @click="startEffect">Start Effect</button>
  <div id="effact" :class="Classes"></div>
  
  <div :class="[float, blue, 'text-color']">class</div>
  
  <div>
    <input type="text" v-model="userClass"/>
    <div :class="[{visible: true}, userClass]"></div>
  </div>
  
  <div>
    <input type="text" v-model="userClass"/>
    <input type="text" v-model="isVisible">
    <div :class="[{visible: isVisible}, userClass]"></div>
  </div>
  
  <div>
    <input type="text" v-model="myStyle.backgroundColor"/>
    <div :style="myStyle"></div>
  </div>
  
  <div>
    <button @click="kaishi">Strat begin</button>
    <div :class="['jindutiao']" :style="jindutiaoColor">
    </div>
  </div>
</div>
#effact {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.highlight{
  background-color: red;
  width: 200px !important;
}
.nohighlight{
  background-color: blue;
  width: 100px !important;
}
.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow
}

.pink {
  background-color: pink
}

.orange {
  background-color: orange
}

.float {
  float: right;
}

.text-color {
  color: yellow;
}

.visible {
  width: 50px;
  height: 50px;
}

.jindutiao {
  width: 200px;
  height: 20px;
  border: 1px solid black;
}