Vuejs 在模板中添加多行? [英] Vuejs add multiple lines to a template?

问题描述

我想知道在构建 Vuejs 模板时如何最好地安排新行.我拥有的代码不起作用，因为它破坏了 JavaScript 容器.Vue.js 希望我将整个 html 放在一行中，这在我计划添加页脚内容时有些不切实际.

Vue.component('footer-component', {模板: "<div id='footer'>页脚的东西</div>"})新的 Vue({el: '页脚'})

我一直在尝试使用 Vue 查找 HTML 模板示例，但找不到它们.使用 React 时，我可以在多行上编写 HTML.我如何为 Vuejs 做同样的事情?

解决方案

您可以使用模板文字来包围模板字符串.这将允许您在模板属性中编写多行 HTML.

您可以在 模板上的 Mozilla Javascript 参考中阅读更多内容文字.

Vue.component('footer-component', {模板:`<div id='footer'>页脚的东西

`})新的 Vue({el: '页脚'})

我也在寻找您想在 Vue 对象中引用元素footer"，也许您应该尝试引用另一个元素.在本例中，您希望成为页脚组件之父的元素.

I would like to know how best to arrange new lines when constructing a Vuejs template. The code I have as is does not work, as it breaks the JavaScript container. Vue.js wants me to put the entire html in one line, which is somewhat impractical when I plan on adding footer content.

Vue.component('footer-component', {
    template: "
      <div id='footer'>
        Footer Stuff
      </div>"
})

new Vue({
    el: 'footer'
})

I've been trying to find examples of HTML templating with Vue, but I have trouble finding them. When using React I am able to code my HTML over multiple lines. How might I do the same for Vuejs?

解决方案

You can use template literals to surround your template string. This would allow you to write multiple lines of HTML in your template property.

You can read more of this in Mozilla's Javascript reference on Template literals.

Vue.component('footer-component', {
    template: `
      <div id='footer'>
        Footer Stuff
      </div>`
})

new Vue({
    el: 'footer'
})

I am also looking that you want to reference the element 'footer' in your Vue object, maybe you should try to reference another element. In this case, the element you want to be the father of your footer-component.

这篇关于Vuejs 在模板中添加多行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！