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了,也是在复习吧,罪过

猜你喜欢

转载自blog.csdn.net/XU441520/article/details/105518294
今日推荐