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

  • Z时代
  • 2024-02-06
  • 分类：IT

<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封装大改

回答：

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

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

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

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

回答：

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

回答：

我觉得做不到这样吧，文档里也没看到这样的骚操作，要不然岂不是可以无限套娃下去一直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>

以上是 vue如何使用v-bind绑定多个值（多个值中有v指令v-if）？ 的全部内容， 来源链接： utcz.com/p/935043.html

回到顶部