用Vue寫個開關控制兩張圖的切換,點擊換張圖,再次點擊就換回去

0 0 vue.js
DPJune
DPJune

聲望值:128 0人

2018-10-15 15:07:32 提問

關注 0關注

收藏 0收藏, 6827瀏覽

圖片描述

具體的就是點擊這個排序,后面的箭頭換張向上的圖片,再次點擊換回來,又變成這個向下的圖片,用Vue該怎么寫呀?
補充:具體的道理我都明白,是做個判斷,但是具體的代碼實現,還是遇到了一些問題,勞煩大佬給實現的代碼也寫出來吧!拜托了

請先 登錄 后評論

6個回答

  • 狂奔岻蝸牛162聲望 2018-10-15 16:02

    首先,不用換圖片,css旋轉就好切換class來控制css變換
    請先 登錄 后評論
  • freestyle131聲望 2018-10-15 16:02

    template標簽里寫兩個<div v-on:click="arrowChange"><img src="up.png" v-show="isup"><img src="down.png" v-show="!isup"></div>,data里定義isup的值為true,methods里添加arrowChange:function(){this.arrowChange=!this.arrowChange},就可以了
    請先 登錄 后評論
  • 路漫猿兮54聲望 2018-10-15 16:02

    <template> <div> <button @click="showIcon = !showIcon">排序</button> <i :class="`icon ${showIcon ? 'up' : 'down'}`"></i> </div> </template> data () { return { showIcon: false } } 希望幫助到你
    請先 登錄 后評論
  • 寫bug小能手103聲望 2018-10-15 16:02

    <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判斷此時的排序是升序還是降序 //...排序方式 this.downIcon = !this.downIcon } } }) </script> 其實是不建議你這么換圖片的,可以用css寫個動畫讓圖片旋轉180°,還有就是多看看官方的文檔,這些都是很基礎的一些知識vue官網
    請先 登錄 后評論
  • -II、執念213聲望 2018-10-15 16:02

    我覺得這種方法更靈活些,樓主覺得呢?這也是很多輪播圖常用的邏輯 <template> <div> <img :src="imgSrc" @click="toggleImg"/> </div> </template> <script> export default { data() { return { bgImg: ['../a.jpg', '../b/jpg'], imgIndex: 0 } }, computed: { imgSrc() { //計算圖標地址 return bgImg[this.imgIndex] } }, methods: { toggleImg() { this.imgIndex = (this.imgIndex + 1) % (this.bgImg).length } } } </script>
    請先 登錄 后評論
  • 風中孤狼128聲望 2018-10-15 16:02

    <img src="向上的箭頭" v-show="showUpImg" @click="changeImg"> <img src="向下的箭頭" v-show="!showUpImg" @click="changeImg"> //設置一個變量標識 data(){ return{ showUpImg:true } } //方法 methods{ changeImg:function(){ this.showUpImg = !this.showUpImg } }
    請先 登錄 后評論

注冊新賬號

懸賞追問
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 輸入數值
發布追問
重庆快乐十分开奖记录