vue如何使用v-bind绑定多个值（多个值中有v指令v-if）？

Question

<script>
export default {
  data() {
      return {
        awesome: true,
        attrs:{"v-if":"awesome"}
      }
    }
}
</script>

<template>
  <button @click="awesome = !awesome">toggle</button>

    <h1 v-bind="attrs">Vue is awesome!</h1>
</template>

https://play.vuejs.org/#eNp9UctuwyAQ/BXKqZXyUJSb5UR9KIf20FZt1...

---

问题来源：https://stackoverflow.com/questions/41944054/reference-element-property-within-another-property
想要解决这个问题，又不想用v-for封装大改

Answer 1

首先 v-if 不是值绑定，所以不归 v-bind 管

我能想到的解决方案有两个

1. 在 Vue 模板编译前加入一层你自己的 transform
2. 写一个新指令，比如 v-super-bind="{ 'v-if': 'awesome', '@click': () => {} }"，具体怎么实现最好，我还没想好，看看有没有大佬知道

PS 这个需求是挺有趣的，不过不建议在生产中使用

Answer 2

v-bind 和 v-if 是两个独立的指令吧，没见过把v-if放到&attrs中

Answer 3

我觉得做不到这样吧，文档里也没看到这样的骚操作，要不然岂不是可以无限套娃下去一直v-bind了。。(不排除大佬指路）
但是话说回来一般人也不会这么用的，就老老实实这么写:

<script>
export default {
  data() {
      return {
        awesome: true,
        attrs:{"var1":"val1","var2":"val2"}//..
      }
    }
}
</script>

<template>
  <button @click="awesome = !awesome">toggle</button>
    <h1 v-if="awesome" v-bind="attrs">Vue is awesome!</h1>
</template>