问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在 vuejs 中绑定 html <title> 内容？

社区维基
1
新手上路，请多包涵

我正在尝试在 vuejs 上进行演示。现在我希望 html 标题绑定一个 vm 字段。

以下是我尝试过的：

index.html

 <!DOCTYPE html>
<html id="html">
<head>
    <title>{{ hello }}</title>
    <script src="lib/requirejs/require.min.js" data-main="app"></script>
</head>
<body>
{{ hello }}
<input v-model="hello" title="hello" />
</body>
</html>

app.js

 define([
    'jquery', 'vue'
], function ($, Vue) {
    var vm = new Vue({
        el: 'html',
        data: {
            hello: 'Hello world'
        }
    });
});

但是标题似乎没有限制，如何使它起作用？

原文由 Alfred Huang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlmvvmfrontendvue.js
阅读 523
2 个回答
得票最新
社区维基
1
✓ 已被采纳

基本上有两种方法可以解决它。

使用现有包

例如， vue-meta ：

>  <template>
>   <div id="app">
>     <router-view></router-view>
>   </div>
> </template>
>
> <script>
>   export default {
>     name: 'App',
>     metaInfo: {
>       // if no subcomponents specify a metaInfo.title, this title will be used
>       title: 'Default Title',
>       // all titles will be injected into this template
>       titleTemplate: '%s | My Awesome Webapp'
>     }
>   }
> </script>
>
> ```

# 创建自己的组件

创建一个包含以下内容的 vue 文件：




使用注册组件

import titleComponent from ‘./title.component.vue’; Vue.component(‘vue-title’, titleComponent);


然后你可以在你的模板中使用它，例如

”`

原文由 str 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

您可以在 App.vue 文件中使用 1 行，如下所示：

 <script>
    export default {
        name: 'app',
        created () {
            document.title = "Look Ma!";
        }
    }
</script>

或者更改 <title> 标签内容 public/index.html

 <!DOCTYPE html>
<html>
  <head>
    <title>Look Ma!</title> <!- ------ Here ->
  </head>
...

原文由 MonoThreaded 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题