Vue.js 模板中的道具不随VueJS显示

我一直试图在组件的模板中传递一个道具。 我想我在这里遗漏了一些要点，而且我还没有开始在单个文件中包含我的组件

app.js

Vue.component('chat-response', {
    props: ['response', 'senderClass'],
    template: '<div>From {{ senderClass }} : {{ response.text }}</div>'
})

var app = new Vue({
    el: '#app_chat',
    data: {
        responseList: [
            { id: 0, text: 'Response 1', type: 'Owner' },
            { id: 1, text: 'Response 2', type: 'Other' },
            { id: 2, text: 'Response 3', type: 'None' }
        ]
    }
})

正如我们看到的，senderClass不会出现。我尝试过不同的方法，但只有在阅读之后才能理解错误

我不希望使用响应。键入而不是senderClass，因为在此期间，我正在使用真正的css类将senderClass设置在挂载后

---

也许是我的方法完全错了，你能给我一些提示吗？

我想你的房子的名字错了。只需将page.html

v-bind:senderClass=“response.type”

更改为

v-bind:sender class=“response.type”

---

HTML属性名称不区分大小写。任何大写字符都将被解释为小写。因此，骆驼壳道具名称需要使用其烤羊肉串壳的等价物

我认为你的财产的名称是错误的。只需将page.html

v-bind:senderClass=“response.type”

更改为

v-bind:sender class=“response.type”

---

HTML属性名称不区分大小写。任何大写字符都将被解释为小写。因此，骆驼壳道具名称需要使用其烤羊肉串壳的等价物

除了Jns所说的，您可以完全摆脱v-bind，只需使用：

varibaleName

进行绑定

链接到小提琴

---

除了Jns所说的，您可以完全摆脱v-bind，只需使用：

varibaleName

进行绑定

链接到小提琴

---

你说得很对，而且现在可以用了，我现在觉得自己很蠢，我太习惯了！谢谢！：）你说得很对，它现在起作用了，我现在觉得自己很蠢，我太习惯了！谢谢！：）谢谢你的回答。据我所知，我可以使用v-bind:class=和：class=，两者都可以做相同的事情，但它比较短。是的，我的意思是：-）谢谢你的回答。据我所知，我可以使用v-bind:class=和：class=，两者都可以做相同的事情，但它比较短

...
<chat-response v-for="response in responseList"
                                   v-bind:key="response.id"
                                   v-bind:response="response"
                                   v-bind:senderClass="response.type"></chat-response>
...

From : Response 1
From : Response 2
From : Response 3