无涯教程网

Vue.js向模板添加多行

发布于01月21日

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

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

new Vue({
    el: 'footer'
})

我一直在try 用Vue寻找HTML模板的例子，但我很难找到它们.使用React时，我可以在多行代码中编写HTML.我该如何为Vuejs做同样的事情？

推荐答案

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

您可以在Template literals上的Mozilla Javascript参考中阅读更多内容.

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

new Vue({
    el: 'footer'
})

我还发现，如果你想引用Vue对象中的元素"footer"，也许你应该try 引用另一个元素.在本例中，您希望成为页脚组件之父的元素.

Vue.js相关问答推荐

Vuetify快速失败不会阻止发送表单

为什么我的数组在 onBeforeMount 函数中不为空，但在 onMounted 函数中为空

如何使用composition api v-model Select 框获取其他JSON 值？

Vuetify右侧并排switch

Vue 3 如何通过多个组件传递插槽

：deep() 带有嵌套 scss 规则的语法

如何 for each 用户分组聊天消息？

如何在map中添加新的标记 onclick？

判断 vue-router.beforeEach 不限制对路由的访问

Vuex - 如何跨不同选项卡持久存储更新？

如何判断 Vue 组件是否处于活动状态

重新加载发布到 Github 页面的 Vue 网站时出现 404

store 的 Vuex Classic 模式已弃用，将在 Nuxt 3 中删除

从 Axios 响应中解析 XML，推送到 Vue 数据数组

Vue组件未在laravel 5.3中使用Passport 显示

输入文件 Select 事件在 Select 同一文件时未触发

Vue如何将动态ID与v-for循环+字符串中的字段连接起来？

在路由更改之前显示确认对话框

Vuejs - 使用 v-if 切换的保持活动组件

偶数行格式化

实用课程推荐

相关教程推荐