Menu
I'm trying a demo on vuejs. Now I want the html title to bind a vm field.
The below is what I tried:
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?
705
The simplest way to get started with Vue is to grab the development version script for it and add it to the head tag of your HTML file. Then you can start Vue code inside the HTML file inside of script tags. And have the Vue code connect up with an existing element on your HTML page.
If we want to bind any variable, we can simply use Vue. js's double curly braces syntax or “Mustache” syntax to bind any variable from the relative component instance. Or, if we want to bind any variable inside an HTML attribute, we can use the v-bind directive.
“v-bind title” Code Answer's The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive.
There are essentially two ways to solve it.
For example, 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>
Create a vue file containing:
<script> export default { name: 'vue-title', props: ['title'], watch: { title: { immediate: true, handler() { document.title = this.title; } } }, render () { }, } </script> Register the component using
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> You can do it with 1 line in the App.vue file, like this:
<script> export default { name: 'app', created () { document.title = "Look Ma!"; } } </script> Or change the <title> tag content in public/index.html
<!DOCTYPE html> <html> <head> <title>Look Ma!</title> <!- ------ Here -> </head> ... If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
