今天小穎要實現點擊Tabs 標簽頁中每個標簽，并動態獲取當前點擊的標簽值。

一句話說不清楚，那就看動態圖吧

小穎一開始看官網寫的代碼是：

<template>
    <Tabs :value="whereMap.type" @on-click="clickTabs">
      <TabPane label="標簽一" name="-1">標簽一的內容</br>當前whereMap.type值：{{whereMap.type}}</TabPane>
        <TabPane label="標簽二" name="1">標簽二的內容</br>當前whereMap.type值：{{whereMap.type}}</TabPane>
        <TabPane label="標簽三" name="2">標簽三的內容</br>當前whereMap.type值：{{whereMap.type}}</TabPane>
    </Tabs>
</template>
<script>
    export default {
        data(){
          return{
            whereMap: {
              type: '-1'
            }
          }
        },
      methods:{
        clickTabs(){
          alert(this.whereMap.type);
        }
      }
    }
</script>

結果發現，whereMap.type的值一直都是“-1”，后來仔細看了api才知道，即使將 value 寫成 :value 也是不起作用的，要實現雙向綁定時需用 v-model

所以只需將 :value="whereMap.type" 改為：v-model="whereMap.type" 即可

總結

以上是生活随笔為你收集整理的踩iviewui中Tabs 标签页数据绑定坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。