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

Question

我对 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 属性？

Answer 1

问题是：

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

另外，根据文档：

不能在 HTML 属性内使用小胡子。相反，使用v-bind指令。

因此，而不是title="${text}"（因为您使用的是 custom delimiters，相当于title="{{ text }}"），

使用：

v-bind:title="text" 

或者 v-bind的简写：

:title="text"