熟练使用vue的基本命令完成页面的数据渲染 【训练提示】 1.使用v-for 进行数据渲染 2.使用动态绑定样式 3.使用v-if 判断Tab 方向 【训练步骤】 1.初始化数据 2.完成计算的业务逻辑 3.完成页面的渲染

好的，下面是一个简单的示例代码：

HTML模板部分：

<div id="app">
  <ul>
    <li v-for="(item, index) in list" :key="index" :class="{ active: index === activeIndex }">
      {{ item.name }}
    </li>
  </ul>
  <div v-if="direction === 'left'">向左滑动</div>
  <div v-else-if="direction === 'right'">向右滑动</div>
  <div v-else>未知方向</div>
</div>

JavaScript部分：

new Vue({
  el: '#app',
  data: {
    list: [
      { name: 'item 1' },
      { name: 'item 2' },
      { name: 'item 3' },
      { name: 'item 4' }
    ],
    activeIndex: 0,
    startX: 0,
    startY: 0,
    direction: ''
  },
  computed: {
    currentItem() {
      return this.list[this.activeIndex]
    }
  },
  methods: {
    handleTouchStart(event) {
      this.startX = event.touches[0].clientX
      this.startY = event.touches[0].clientY
    },
    handleTouchEnd(event) {
      const endX = event.changedTouches[0].clientX
      const endY = event.changedTouches[0].clientY
      const deltaX = endX - this.startX
      const deltaY = endY - this.startY
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        this.direction = deltaX > 0 ? 'right' : 'left'
      } else {
        this.direction = deltaY > 0 ? 'down' : 'up'
      }
    }
  },
  mounted() {
    document.addEventListener('touchstart', this.handleTouchStart)
    document.addEventListener('touchend', this.handleTouchEnd)
  },
  beforeDestroy() {
    document.removeEventListener('touchstart', this.handleTouchStart)
    document.removeEventListener('touchend', this.handleTouchEnd)
  }
})

上面的示例代码中，使用了v-for指令对list数组进行遍历渲染，在<li>元素中使用了动态绑定样式的方式实现了选中效果。使用了v-if指令根据方向变量的值来判断Tab方向并进行展示。同时在JavaScript部分实现了手势滑动事件，并根据滑动的方向计算出了方向变量的值。