代码之家 › 专栏 › 技术社区 › Gqqnbig

使用Template文本的属性绑定在vuejs组件中不起作用?

vue.js

0

Gqqnbig · 技术社区 · 5 年前

<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的属性设置为“哈哈”+标题。

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

为什么会这样?如何修复它?

1 回复 | 直到 5 年前

1

9

skirtle 5 年前

我相信你在找这个:

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

属性值需要用以下任一方式分隔 " 或 ' The v-bind: 前缀使Vue将属性的值视为JavaScript表达式。在该表达式中,回溯将按照您的预期进行解释。你不能简单地合并这两组引号,它们有不同的用途。