无涯教程网
首页
脚本教程
前端教程
Java教程
Python教程
微软教程
数据库教程
移动开发教程
编程语言教程
其它教程
片段
问答
工具
首页
/
技术问答
/
Vue.js问答列表
/
问答详情
如何在 vue.js 中绑定 html
内容</a></h1> </div> <div class="entry-info" style="padding: 4px 0 0 0;"> <time class="entry-date published"> 发布于11月03日 </time> </div> <div class="intro mb20"> <p>我正在vuejs上做一个演示.现在我希望html标题绑定一个vm字段.</p> <p>以下是我try 的:</p> <p><code>index.html</code></p> <pre><code><!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> </code></pre> <p><code>app.js</code></p> <pre><code>define([ 'jquery', 'vue' ], function ($, Vue) { var vm = new Vue({ el: 'html', data: { hello: 'Hello world' } }); }); </code></pre> <p>但标题似乎没有界限，如何使其发挥作用？</p> </div> </div> </div> <div class="q-single mt20"> <div class="intro mb20"> <div class="layui-card"> <div class="layui-card-header"><h2>推荐答案</h2></div> <div class="layui-card-body"> <p>基本上有两种解决方法.</p> <h1>Use an existing Package</h1> <p>例如，<a href="https://vue-meta.nuxtjs.org/" rel="noreferrer"><strong>vue-meta</strong></a>:</p> <blockquote> <pre><code><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> </code></pre> </blockquote> <h1>Create your own Component</h1> <p>创建包含以下内容的vue文件:</p> <pre><code><script> export default { name: 'vue-title', props: ['title'], watch: { title: { immediate: true, handler() { document.title = this.title; } } }, render () { }, } </script> </code></pre> <p>使用以下命令注册组件:</p> <pre><code>import titleComponent from './title.component.vue'; Vue.component('vue-title', titleComponent); </code></pre> <p>然后你可以在模板中使用它，例如.</p> <pre><code><vue-title title="Static Title"></vue-title> <vue-title :title="dynamic.something + ' - Static'"></vue-title> </code></pre> </div> <div class="layui-card-footer"> <span id="share"></span> </div> </div> </div> </div> <div class="entry-content mt20"> <h2 class="tip_title">Vue.js相关问答推荐</h2> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/78317416.html" title="在VueJS中卸载元素之前是否应该删除JavaScript事件收件箱？">在VueJS中卸载元素之前是否应该删除JavaScript事件收件箱？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/74933821.html" title="vuetify/mdi 不显示图标">vuetify/mdi 不显示图标</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/74608330.html" title="如何 for each 动态创建的按钮/文本字段设置唯一变量？">如何 for each 动态创建的按钮/文本字段设置唯一变量？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/43315926.html" title="两个div元素之间的vue2过渡">两个div元素之间的vue2过渡</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/49046697.html" title="Vue：根元素内容和内容分发槽">Vue：根元素内容和内容分发槽</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/43461752.html" title="如何渲染数组以 Select 选项 vue.js">如何渲染数组以 Select 选项 vue.js</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/49820828.html" title="在 jest document.querySelector 中测试 vue 组件期间始终返回 null">在 jest document.querySelector 中测试 vue 组件期间始终返回 null</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/52685886.html" title="在按键 vuejs 中只允许数字和一个小数点后 2 位限制">在按键 vuejs 中只允许数字和一个小数点后 2 位限制</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/41712791.html" title="在textbox文本框 VueJS 2 中键入时搜索列表">在textbox文本框 VueJS 2 中键入时搜索列表</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/54519926.html" title="VueJS + Typescript：类型上不存在属性">VueJS + Typescript：类型上不存在属性</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/57287497.html" title="Keycloak：用户基于角色的客户端登录访问限制">Keycloak：用户基于角色的客户端登录访问限制</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/24593768.html" title="Vue.js 如果在视图中">Vue.js 如果在视图中</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/45234567.html" title="从 Url 中删除查询字符串参数">从 Url 中删除查询字符串参数</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/58232691.html" title="将 Vuetify 从 1.5 升级到 2 时，Sass-loader 错误 'options has an unknown property 'indentedSyntax''">将 Vuetify 从 1.5 升级到 2 时，Sass-loader 错误 'options has an unknown property 'indentedSyntax''</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/40909576.html" title="如何避免在 Vue 中一直写 this.$store.state.donkey 的需要？">如何避免在 Vue 中一直写 this.$store.state.donkey 的需要？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/53929421.html" title="Leaflet+Vue+Vuetify / Leaflet map 隐藏 vuetify 弹出对话框">Leaflet+Vue+Vuetify / Leaflet map 隐藏 vuetify 弹出对话框</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/53777258.html" title="异步api调用后如何使用vuex getter">异步api调用后如何使用vuex getter</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/38969975.html" title="在 vue.js 组件中react this.props.children">在 vue.js 组件中react this.props.children</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/42590538.html" title="如何在 Promise 回调中更新 Vue 应用程序或组件的属性？">如何在 Promise 回调中更新 Vue 应用程序或组件的属性？</a></h3> <h3 class="geekgay layui-elip h11"><a href="https://www.learnfk.com/question/vuejs/52129131.html" title="Vuetify 过渡：如何设置过渡速度">Vuetify 过渡：如何设置过渡速度</a></h3> <div class="clear"></div> </div> </div> <div class="layui-col-xs12 layui-col-md3 pl20 mt20"> <div class="layui-card"> <div class="layui-card-header">实用课程推荐</div> <div class="layui-card-body"> <ul class="geek-ul"> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="http://gk.link/a/106W0" rel="nofollow" title="">深入浅出gRPC -〔李林锋〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100019601?code=4EAKafQVHxx61ni45obdeZOwHqCoEm5OZoZYKhs4nLM%3D" rel="nofollow" title="">代码精进之路 -〔范学雷〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="http://gk.link/a/106W0" rel="nofollow" title="">如何做好一场技术演讲 -〔极客时间〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/course/intro/100023001?code=v3Daif8-c-d8AUefRKnxAQFaYKZJFoH24apep%2Fyfm7Y%3D" rel="nofollow" title="">TensorFlow快速入门与实战 -〔彭靖田〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100044301?code=G3e0aTEGmzQSk5K3sjdrLo9D35HB00Mm1vPzMTUK2fQ%3D" rel="nofollow" title="">说透敏捷 -〔宋宁〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100067701?code=2KTSE8yMaYkRAfx5FEBpfK%2F3DGIbV%2F1T-%2FoyMp5kzAI%3D" rel="nofollow" title="">分布式金融架构课 -〔任杰〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100073301?code=26jDcQ3KadiWfMDlb%2FAfOqjk5lmqjPUxmgiQDYTOh0Q%3D" rel="nofollow" title="">流程型组织15讲 -〔蒋伟良〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100080901?code=FMfM76IrrNfmQ7%2FmCgSsx6pKXHG0BTjbVctP0M7pOP0%3D" rel="nofollow" title="">说透5G -〔杨四昌〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100102601?code=-UoTvpbuvzyJ55HMNwlat1FQJ3LZ%2FH3FYQNlEvoEM-g%3D" rel="nofollow" title="">去无方向的信 -〔小麥〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100104501?code=fwuqI75L17KUARepeFhaWyw78TFRbBuEIUg8la%2FFYis%3D" rel="nofollow" title="">eBPF核心技术与实战 -〔倪朋飞〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/column/intro/100114001?code=OxVlMDfUpGswoPSSVtm5Wsdh5-VnoIf8hNM9My11dOY%3D" rel="nofollow" title="">中间件核心技术与实战 -〔丁威〕</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a target="_blank" href="https://time.geekbang.org/course/intro/100757801?code=l6oUE8hHw0HA073FPFMAJEk9V4NwGBcOLY9uBOimBsE%3D" rel="nofollow" title="">Midjourney入门实践课 -〔Jovi〕</a></p> </li> </ul> </div> </div> <div class="layui-card"> <div class="layui-card-header">相关教程推荐</div> <div class="layui-card-body"> <ul class="geek-ul"> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/tensorflow/tensorflow-tutorial.html" title="TensorFlow">无涯教程 - TensorFlow教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/php7+/php7+-tutorial.html" title="PHP7+">无涯教程 - PHP7+教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/ios/ios-tutorial.html" title="iOS">无涯教程 - iOS教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/matplotlib/matplotlib-tutorial.html" title="Matplotlib">无涯教程 - Matplotlib教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/ruby/ruby-tutorial.html" title="Ruby">无涯教程 - Ruby教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/nodejs/nodejs-tutorial.html" title="Node.js">无涯教程 - Node.js教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/swift5/swift5-tutorial-intro.html" title="Swift5">无涯教程 - Swift5教程</a></p> </li> <li class="geek-li layui-elip"> <p class="geekgay"><a href="https://www.learnfk.com/libtorch/libtorch-tutorial-intro.html" title="LibTorch">无涯教程 - LibTorch教程</a></p> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="layui-footer footer footer-doc"> <div class="layui-main"> <div style="margin: 10px 0;text-align: center;" class="frient-link"> <a href="https://www.xiuxiandou.com" target="_blank" title="休闲君评测"><span>休闲君评测</span></a> | <a href="https://www.toolfk.com" title="Programmer's toolbox" target="_blank">TOOLFK工具网</a> | <a href="https://www.poemfk.com" title="古文传承网" target="_blank">古诗文网</a> | <a href="https://www.lxlinux.net" title="良许Linux教程网" target="_blank">良许Linux教程网</a> | <a href="https://foofish.net" title="Python之禅" target="_blank">Python之禅</a> | <a href="https://redstonewill.com" title="红色石头" target="_blank">红色石头</a> | <a href="https://www.rudangla.com" title="入党申请书" target="_blank">入党申请书</a> | </div> <p> © 2020 <a href="https://www.learnfk.com/" title="无涯教程">Hi LearnFk</a> <a href="https://support.qq.com/products/163835" target="_blank" rel="nofollow">意见反馈</a> <a href="/disclaimer.html" title="免责声明" rel="nofollow">免责声明</a> <a href="/aboutus.html" title="关于我们" rel="nofollow">关于我们</a> <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">桂ICP备11002319号-3</a> <span class="pl20"> 友链&广告位+QQ: 1963612630 </span> </p> </div> </div> <script src="/guide/js/layer/layer.js" charset="utf-8" ></script> <script> IS_ARTICLE = false; SHOW_JUMP = false; IS_SIGN = ""; </script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&lang=css" async></script> <script src="/guide/js/article.min.js?v4=1" async charset="utf-8"></script> <script src="/guide/js/clipboard.min.js" async charset="utf-8"></script> <ul class="layui-fixbar"> <li class="layui-icon layui-icon-transfer change-theme" lay-type="bar1" title="切换模式"></li> <li class="layui-icon layui-icon-print" lay-type="bar1" title="打印"></li> <li class="layui-icon layui-icon-login-wechat login-wechat" lay-type="bar1" title="关注我们"></li> <li class="layui-icon layui-fixbar-top layui-icon-top" lay-type="top" title="Top"></li> </ul> <script type="text/javascript"> $(function(){ $("body").delegate(".login-wechat","click",function(e){ e.stopPropagation(); var offset = "100px"; layer.open({ content: '<img src="/common/learnfk.jpg?v=2" width="220px;">', scrollbar: false, title:"关注我们", offset:offset }); }); $("a").click(function(){ if($(this).hasClass("demo-copy")){ return; } if($(this).hasClass("noload")){ return; } layer.load(); setTimeout(function(){ layer.closeAll(); },3000); }); $("pre").map(function(item){ if(!$(this).hasClass("prettyprint")){ $(this).addClass("prettyprint"); $(this).before('<div class="demo-view"><a href="javascript:;" class="demo-copy" title="Copy Code">复制代码</a></div>'); } }); $("body").delegate(".demo-view a.demo-copy", "click", function () { var that = $(this); var tran_text = that.parent(".demo-view").next(".prettyprint").text(); new ClipboardJS("a.demo-copy", { text: function (trigger) { layer.msg("复制成功"); return tran_text; } }); }); }); </script> <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5fab445f7efc200012ec7197&product=sop' async='async' defer></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234706520155299" crossorigin="anonymous"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-31321715-15"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-31321715-15'); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?fbe07850803babb5bcec215bbd0dc6a4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?44422bbce4f642f723e6931a2fce9d632bd6aa77580fe4aad81efd527b26ed8a30632485602430134f60bc55ca391050b680e2741bf7233a8f1da9902314a3fa"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> </body> </html>