前端 - vue如何使用v-bind绑定多个值（多个值中有v指令v-if）？
<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封装大改
共有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>
v-bind 和 v-if 是两个独立的指令吧，没见过把v-if放到&attrs中
首先 v-if 不是值绑定，所以不归 v-bind 管
我能想到的解决方案有两个
- 在 Vue 模板编译前加入一层你自己的 transform
- 写一个新指令，比如
v-super-bind="{ 'v-if': 'awesome', '@click': () => {} }"，具体怎么实现最好，我还没想好，看看有没有大佬知道
PS 这个需求是挺有趣的，不过不建议在生产中使用
-
情景 Vue 模板中我们经常会用到一些中间量，比如 中的 item.a.b.c 中的 message.split(' ') 问题 由于 v-for 或 <slot> 等的包裹，我们难以利用 computed 简单地提出这些中间量（当然我知道都有普通的解决方案) 我想到 Vue 既然有 v-if / v-for 等和 JavsScript 关键字风格类似的内建指令，能不能实现一个 v-let 来简化
-
本文向大家介绍Vue循环中多个input绑定指定v-model实例，包括了Vue循环中多个input绑定指定v-model实例的使用技巧和注意事项，需要的朋友参考一下 Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种： 一种是v-for中循环生成的输入框, 一种是在eleme
-
vue 组件批量绑定属性 v-bind="$attrs" 、 v-bind="$props" 能同时使用吗? 尝试两个都绑定 不可行
-
本文向大家介绍v-on可以绑定多个方法吗？相关面试题，主要包含被问及v-on可以绑定多个方法吗？时的应答技巧和注意事项，需要的朋友参考一下
-
缩写：: 预期：any (with argument) | Object (without argument) 参数：attrOrProp (optional) 修饰符： .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？) .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持) .sync (2.
-
本文向大家介绍如何区分vue中的v-show 与 v-if，包括了如何区分vue中的v-show 与 v-if的使用技巧和注意事项，需要的朋友参考一下 1. v-show 不管初始的条件是什么，元素总是会被渲染，并且只是简单的基于 CSS display: none 或者 display: block 的属性进行切换。 2. v-if 会根据初始的条件（data里自己的定义的数据）来进行真正的渲染