1. 程式人生 > >vue簡單的點擊切換顏色

vue簡單的點擊切換顏色

add pkg 效果 點擊切換 doctype pad lse app change

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>changeColor</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
    span{
        background: lightcoral;
        display: inline-block;
        padding: 10px;
        color: #fff;
        margin: 10px 0;
    }
    .changeColor span{
        background: lightgreen;
    }
</style>
<body>

<div id="app">
    <div :class="{changeColor}" @click="changeColor =! changeColor">
        <span>Hello</span>
    </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    changeColor: false
  },
  methods: {

  }

})
</script>
</body>
</html>

效果如下:
來回切換顏色
技術分享圖片
技術分享圖片

vue簡單的點擊切換顏色