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>

但是，例如，在我的模板中，我不明白为什么＆＃34; title＆＃34;属性不能获得变量$ {text} ...

是否有另一种方法可以将数据从自定义元素传递到模板的HTML属性？

Answer 1

问题是：

内部属性内插已被删除。改为使用v-bind或冒号速记。

另外，per docs：

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

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

使用：

v-bind:title="text"

或 v-bind＆＃39; shorthand ：

:title="text"

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

1 个答案: