mpvue中怎麼等同於微信小程序中的data-key={{value}}

話不多說,微信小程序中:

 <view wx:for="{{navTabs}}" wx:key="index" class="tab-item {{currentTab == index ? 'active' : ''}}" data-current="{{index}}" bindtap="swichNav">
      {{item}}
    </view>
	  data: {
    selectPrjName: null,
    selectPrjId: null,
    winHeight: "",//窗口高度
    currentTab: 0, //預設當前項的值
    scrollLeft: 0, //tab標題的滾動條位置
    navTabs: ["實時", '實控', '歷詢', '歷警', '項置', '視頻','其他']
  },
  // 點擊標題切換當前頁時改變樣式
  swichNav: function (e) {
    var cur = e.currentTarget.dataset.current;
    this.setData({
      currentTab: e.currentTarget.dataset.current
    })
  },
  //判斷當前滾動超過一屏時,設置tab標題滾動條。
  checkCor: function () {
    if (this.data.currentTab > 4) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },

打印一下結果:

而在mpvue中:

<view v-for="(item,index) in navTabs" :key="index" class="tab-item currentTab == index ? 'active' : ''"  @click="swichNav(index)">{{item}}</view>
		methods: {
			handleChangeScroll(detail) {
				this.current_scroll = detail.mp.detail.key;
			},
			swichNav(index) {
				console.log(index);
				// this.setData({
				// 	currentTab: e.currentTarget.dataset.current
				// })
			},
			//判斷當前滾動超過一屏時,設置tab標題滾動條。
			checkCor() {
				if (this.currentTab > 4) {
					this.scrollLeft = 300;
				} else {
					this.scrollLeft = 0;
				}
			},
		},

比如說我要獲取下標(索引值),我不能像前面那樣直接data-key={{value}},然後在對應的點擊事件裏面打印事件對象e,往下找就有。此處我們可以通過v-for遍歷,並在對應的點擊事件裏面直接帶上index,方法裏面index作爲形參即可獲取索引 。

打印一下:

說明一下:我是好久沒接觸vue了,也是在複習吧,罪過

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章