同一个按钮实现升降排序，用vue怎么做？

发布网友 发布时间：2022-04-19 10:17

我来回答

共1个回答

热心网友 时间：2023-06-23 14:33

<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"/> //两种状态的图片

        <span>收藏</span>

      </div>

          new Vue({

                el: '#app',

                data: {

                    downIcon: true

                },

                methods: {

                    collect() {

                        //根据downIcon判断此时的状态是true还是false

                        //对downIcon对状态进行取反

                        this.downIcon = !this.downIcon

                    }

                }

            })