与模板文字的属性绑定在 vuejs 组件中不起作用？答案

【问题标题】：attribute binding with Template literals doesn't work in vuejs components?与模板文字的属性绑定在 vuejs 组件中不起作用？
【发布时间】：2020-06-03 04:14:43
【问题描述】：

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<script type="text/x-template" id="permissions">
    <div>
        <h3 v-bind:data=`haha-${title}` >{{ title }}</h3>
    </div>
</script>

<div id="app">
    <blog-post title="My journey with Vue"></blog-post>
</div>

<script>
    Vue.component('blog-post', {
        props: ['title'],
        template: '#permissions'
    })
</script>
<script>
    new Vue({
        el: "#app"
    });
</script>
</body>
</html>

这是我的代码。我将 h3 上的 data 属性绑定到“haha”+ 标题。

此技术适用于常规 vue 元素，但不适用于 vue 组件。结果是

为什么会这样？如何解决？

【问题讨论】：

标签： vue.js

【解决方案1】：

我相信您正在寻找这个：

<h3 v-bind:data="`haha-${title}`">{{ title }}</h3>

属性值需要用" 或' 分隔。 v-bind: 前缀使 Vue 将属性的值视为 JavaScript 表达式。在该表达式中，反引号将被解释为您所期望的。您不能只合并两组引号，它们有不同的用途。

【讨论】：