如何在Vue的v-if条件判定生效后设置对应data变量的值

方案1：使用计算属性（最推荐） #

你的newValue属于完全由showData派生的状态，直接用Vue内置的计算属性实现即可，完全符合响应式设计逻辑，无需额外处理条件触发：

var vm = new Vue({
  el: "#app",
  data: {
    showData: 'ABC',
    specificData: "here are some specifics"
  },
  computed: {
    newValue() {
      if (this.showData === 'ABC') return 'ROGER'
      if (this.showData === '123') return 'SAM'
      // 可补充其他条件的默认返回值
      return ''
    }
  }
});

模板不需要做任何修改，newValue会自动跟随showData的变化实时更新，不需要手动赋值。如果后续需要扩展匹配规则，直接在计算属性的方法里加判断条件即可。

方案2：使用watch监听（适合newValue需要支持手动修改的场景） #

如果你的newValue后续可能被其他逻辑手动覆盖，不是纯派生状态，可以用监听属性监听showData的变化来赋值：

var vm = new Vue({
  el: "#app",
  data: {
    showData: 'ABC',
    specificData: "here are some specifics",
    newValue: ''
  },
  watch: {
    showData: {
      immediate: true, // 初始化时就触发一次赋值
      handler(val) {
        if (val === 'ABC') this.newValue = 'ROGER'
        if (val === '123') this.newValue = 'SAM'
      }
    }
  }
});

方案3：模板内v-if命中时调用方法（适配你的原始需求） #

如果确实需要在v-if判定通过时直接调用带参数的方法完成赋值，可以给对应元素绑定挂载钩子：

Vue 3 写法 #

直接在v-if元素上使用@mounted钩子调用方法：

<div id ="app">
<div v-if="showData === 'ABC'" @mounted="setNewValue('ROGER')">
  ABC
</div>
<div v-if="showData === '123'" @mounted="setNewValue('SAM')">
  123
</div>
</div>

Vue 2 写法 #

需要先注册一个简单的全局自定义指令：

// 注册全局指令，只需要执行一次
Vue.directive('mounted', {
  inserted: function(el, binding) {
    binding.value()
  }
})

模板里用v-mounted调用方法：

<div id ="app">
<div v-if="showData === 'ABC'" v-mounted="() => setNewValue('ROGER')">
  ABC
</div>
<div v-if="showData === '123'" v-mounted="() => setNewValue('SAM')">
  123
</div>
</div>

然后在Vue实例里添加对应方法即可：

methods: {
  setNewValue(val) {
    this.newValue = val
  }
}

注意：不建议把方法调用直接写在v-if的判定语句里，会导致每次组件渲染都重复执行方法，可能引发性能问题或无限更新。

内容的提问来源于stack exchange，提问作者Geoff_S