以编程方式向元素添加 Vue 指令:v-if 的分步指南
P粉883973481
P粉883973481 2023-09-07 13:54:54
0
1
611

我们可以使用纯 JS 以编程方式向元素添加自定义属性,例如 element.attr('data-attr', someValue),但是像 v-if 这样的 Vue 指令又如何呢

给定以下元素

<p v-html="data.title"></p>

如何以编程方式添加 v-if?我问这个是为了自动化,因为将有数百个可能存在也可能不存在的动态变量。

期望的结果是

<p v-if="data.title" v-html="data.title"></p>

我知道的唯一步骤是使用 ref 获取 created() 中的元素。

P粉883973481
P粉883973481

全部回复(1)
P粉764785924

根据声明 - 将有数百个可能存在或可能不存在的动态变量。但是如果我在您的评论中看到,您说 >无循环。那么你如何渲染动态元素?

根据我的理解,您希望将数据属性动态绑定到 HTML 模板中。您可以尝试一下这个解决方案,看看它是否符合您的要求。

new Vue({
  el: '#app',
  data: {
    data: {
        heading: '<H1>Heading 1</H1>',
      title: '<h3>Title 1</H3>'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p v-for="(item, index) in Object.keys(data)" :key="index"  v-html="data[item]"></p>
</div>

上面的代码片段始终适用于现有的动态属性。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板