时间戳

首页 > 解决方案 > 如何使用 VueJS 创建动态/原始 HTML

javascript - 如何使用 VueJS 创建动态/原始 HTML

问题描述

我想把它span变成一个真正的元素。当我尝试这种方式时，appendChild会给我一个错误，因为变量是字符串而不是对象。有任何想法吗？

export default{
    data(){
       ....
    }   
    methods:{
      update_period: function(event){
        var start = moment(event.start).format('M/D/Y'),
            end = moment(event.end).format('M/D/Y');
        
        var span = `<span @click="remove">{{ start }} - {{ end }}</span>`

        this.$refs.spans.appendChild(span);
      },
      remove: function(event){
        event.target.remove()
      }
    }
  }
<div ref="spans">

</div>

标签： javascriptvue.jsvuejs2

解决方案

您可以通过这种方式获得相同的结果：

<template>
    <div>
        <span @click="remove" v-if="period">{{ period }}</span>
    </div>
</template>
<script>
export default {

    data() {
        return {
            period: null,
        }
    },

    methods:{
        update_period(event) {
            this.period = moment(event.start).format('M/D/Y') + ' - ' + moment(event.end).format('M/D/Y')
        },
        remove() {
            this.period = null;
        }
    }

}
</script>

推荐阅读