vue開關控制兩張圖片，點擊展示不同圖片

原文鏈接：https://www.jianshu.com/p/cfdbb2f85dd0

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-lg-offset-3 text-center">
            <div id="app">
                <button @click="sort">排序</button>
                <i class="fa el-down-icon" v-show="downIcon"></i>
                <i class="fa el-up-icon" v-show="!downIcon"></i>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            downIcon: true
        },
        methods: {
            sort() {
                //根據downIcon判斷此時的排序是升序還是降序
                //排序方式
                //對downIcon對狀態進行取反
                this.downIcon = !this.downIcon
            }
        }
     })
    //這種方法是圖標形式的
</script>

    

//下面這種方法是圖片形式的
<div class="collect" @click="collect"> //點擊切換狀態的方法
    <img src="./img/star.png" v-show="downIcon"/>  //兩種狀態的圖片
    <img src="./img/timg.png" v-show="!downIcon"/> //兩種狀態的圖片
</div>
new Vue({
    el: '#app',
    data: {
        downIcon: true
    },
    methods: {
        collect() {
            //根據downIcon判斷此時的狀態是true還是false
            //對downIcon對狀態進行取反
            this.downIcon = !this.downIcon
        }
    }
})