时间戳

首页 > 解决方案 > 如何使用 Vue 将实际的 html 添加到我的代码中？

vue.js - 如何使用 Vue 将实际的 html 添加到我的代码中？

问题描述

我正在使用 Vue 创建一个简单的套牌编辑器，我想要一个卡片列表，上面有一个“添加”按钮。

单击按钮时，我希望卡片图像和名称出现在侧栏上。但是，连接到“deck”变量会返回字符串文字。

<div id = app> 
     <p v-on:click="addImg">
         {{ Images }}} 
     </p>
</div>



var app = new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      premium: true
    }
})

data() {
    return {
    images: ""
}

 methods: {
      addImg: function() {
          this.images += <img src="example text">
      },

标签： vue.js

解决方案

您正在呈现文本，但附加了 html。

<p v-on:click="addImg" v-html='images'></p>

见https://vuejs.org/v2/guide/syntax.html#Raw-HTML

添加元素或组件更好地使用数组而不是字符串：https ://vuejs.org/v2/api/#v-for

推荐阅读