时间戳

首页 > 解决方案 > 使用模板字符串作为 Vue 模板

javascript - 使用模板字符串作为 Vue 模板

问题描述

我正在学习Vue。据我所知，我应该能够在 Vue 中使用一个简单的模板字符串作为模板。但是由于某种原因，Vue 只渲染了第一个 html 标签。

Vue.config.devtools = true;

let template = `<h2>Hi {{name}}</h2><h1>{{age}}</h1>`

const vm = new Vue({
    el: '#app',
    data() {
        return {
            name: 'Name',
            age: 23,
            message: 'hello'
        }
    },
    template,
    methods: {
        greet(e) {
            return this.message = e.target.value
        },
        esc(e) {
            e.target.value = ''
        }
    }
})
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

这仅呈现“Hi Name”。为什么不显示年龄？

标签： javascriptvue.js

解决方案

Vue 模板应该只有一个根节点。我认为您应该在控制台中对此发出警告消息。

尝试：

let template = `<div><h2>Hi {{name}}</h2><h1>{{age}}</h1></div>`

推荐阅读