vue.js - vue到底怎么再method中获得所需要的值啊

问题描述

问 题

最近刚学习vue，感觉获取相关的值好复杂，比如我给select绑定一个change事件，修改class的值，然后data () {}
中输出默认的class，在methods中定义change事件，但是总是获取不到class

---

<select @change="gatherType($event)">
              <option value="UrlListDetail">UrlListDetail</option>
              <option value="DataBlockList">DataBlockList</option>
              <option value="SinglePage">SinglePage</option>
              <option value="JsonData">JsonData</option>
            </select>
<tr :class="{JsonData:isJsonData}"> </tr>
<tr :class="{UrlListDetail:isUrlListDetail}"> </tr>
<tr :class="{SinglePage:isSinglePage}"> </tr>
<tr :class="{DataBlockList:DataBlockList}"> </tr>

 data () {
    return {
      isJsonData: true,
      isdataBlockParse: true,
      isUrlListDetail: true,
      isSinglePage: true
    }
  },
  methods: {
    gatherType: function (event, item) {
      console.log(event.target.value)
      switch (event.target.value) {
        case 'UrlListDetail':
          isJsonData: false
          break
        case 'JsonData':
          isJsonData: true
      }
    }
  }

但是根本获取不到isJsonData的值，我该怎么写才能修改他的值啊，感觉用起来没有JQ简单粗暴，vue要注意的东西好多

解决方案

多看文档会减少你的疑惑

methods: {
    gatherType: function (event, item) {
      console.log(event.target.value)
      switch (event.target.value) {
        case 'UrlListDetail':
          this.isJsonData = false
          break
        case 'JsonData':
          this.isJsonData = true
      }
    }
  }

这篇关于vue.js - vue到底怎么再method中获得所需要的值啊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！