vuejs 将数据传递给模板 html 属性答案

【问题标题】：vuejs pass data to template html attributesvuejs 将数据传递给模板 html 属性
【发布时间】：2018-03-27 14:41:25
【问题描述】：

我对 Vuejs 很陌生。我了解如何将数据（变量）传递到组件中，但在我的代码中，我需要在模板的 HTML 属性中获取这些变量。

这里是我的 HTML：

<div id="activities" class="row text-center activities">
     <myimage text="{{ art_text }}" type="art"></myimage>
</div>

这是我的 Vuejs 代码（由于 Twig，分隔符已更改）：

<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script>

<script type="text/javascript">

    Vue.component('myimage', {
        delimiters: ['${', '}'],
        props: ['text', 'type'],
        template: '<div class="col-lg-3 col-md-3" style="padding-top: 20px;"><h3><a title="${text}" href="#"><span> <img style="width:220px;" alt="Image ${type}"> </span></a></h3><span>${text}</span></div>'
    });

    new Vue({
        el: '#activities'
    });
</script>

但是例如，在我的模板中，我看不出为什么“title”属性没有得到变量 ${text} ...

还有其他方法可以将数据从自定义元素传递到模板的 HTML 属性吗？

【问题讨论】：

标签： vue.js

【解决方案1】：

问题是：

属性内的插值已被删除。请改用v-bind 或冒号简写。

另外，per docs:

不能在 HTML 属性中使用胡须。相反，请使用 v-bind 指令。

所以，而不是title="${text}"（也就是说，因为您使用的是自定义delimiters，相当于title="{{ text }}"），

用途：

v-bind:title="text"

或者v-bind的shorthand：

:title="text"

【讨论】：