我怎样才能绑定 html <title>vuejs 中的内容? [英] How can I bind the html <title> content in vuejs?
本文介绍了我怎样才能绑定 html <title>vuejs 中的内容?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试一个关于 vuejs 的演示.现在我想要 html 标题绑定一个 vm 字段.
I'm trying a demo on vuejs. Now I want the html title to bind a vm field.
以下是我尝试过的:
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'
}
});
});
但是标题好像没有界限，怎么弄?
But the title seemed not bounded, how to make it work?
推荐答案
基本上有两种方法可以解决.
There are essentially two ways to solve it.
例如，vue-meta:
<脚本>导出默认{name: '应用程序',元信息:{//如果没有子组件指定 metaInfo.title，则将使用此标题title: '默认标题',//所有的标题都会被注入到这个模板中标题模板:'%s |我真棒网络应用程序'}}
创建自己的组件
创建一个包含以下内容的 vue 文件:
Create your own Component
Create a vue file containing:
<script>
export default {
name: 'vue-title',
props: ['title'],
watch: {
title: {
immediate: true,
handler() {
document.title = this.title;
}
}
},
render () {
},
}
</script>
使用
import titleComponent from './title.component.vue';
Vue.component('vue-title', titleComponent);
然后你可以在你的模板中使用它，例如
Then you can use it in your templates, e.g.
<vue-title title="Static Title"></vue-title>
<vue-title :title="dynamic.something + ' - Static'"></vue-title>
这篇关于我怎样才能绑定 html <title>vuejs 中的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
