动态设置html的title

使用vue前端框架做,竟然丢弃了很多javascript和html的东西了。。
动态设置title的方法:

1.使用vue的自定义指令


<div v-title>{{htmltitle}}</div>
...
directives: {
  title: {
      inserted: function (el, binding) {
          document.title = el.innerText
          el.remove()
      }
  }
}

2.很简单


// 设置html title
document.title = sessionStorage.getItem('title')

3.router路由不同的title


...
routes: [
        {
            path: '/index',
            name: 'index',
            component: index,
            meta:{
                title:'首页'
            }
        },
        {
            path: '/user',
            name: 'user',
            component: user,
            meta:{
                title:'个人中心'
            }
        }
    ]
...
router.beforeEach((to, from, next) => {
    if (to.meta.title) {
        document.title = to.meta.title
    }
    next()
})

原文地址:https://segmentfault.com/a/1190000016801359

原文地址:https://www.cnblogs.com/lalalagq/p/9900962.html

时间: 2024-10-14 07:37:53

动态设置html的title的相关文章

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

javascript如何动态设置div的样式

javascript如何动态设置div的样式:有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="aut

AngularJS动态设置CSS

使用AngularJS动态设置CSS大致有2种思路: 1.通过动态设置class名称 比如先定义2个样式: .show-true{    display:block;} .show-flase{    display:none;} 在某个元素中: <div class="show-{{temp}}"..... temp为$scope的一个变量,通过设置$scope.temp = true 或 $scope.temp = false来决定temp变量的具体值. 比如: <!d

转:zTree树控件入门之checkbox:如何动态设置节点的checkbox选择框启用与禁用状态(chkDisabled)

当一棵树的部分节点根据登入用户角色不同而决定是否启用节点前的checkbox选择框的时候,我们应该如何做呢?也或者如何在页面加载的时候动态根据当前登入用户角色动态切换节点前的checkbox的禁用状态? 针对上列一系列问题,今天这里将做一个统一的讲解: 关于节点前的checkbox选择框是否禁用,是通过属性chkDisabled来决定的,值为true则表示禁用:反之表示启用: 一.初始化设置节点禁用 示例代码如下所示: var zNodes =[ { id:1, pId:0, name:"随意勾

:style动态设置属性

前段时间做页面时需要动态设置背景图片,每一种框架都会遇见类似的需求,特记录下来,以免不时之需: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> li span { width: 100px; height: 100px; border-radius

小程序之--动态设置页面标题 wx.setNavigationBarTitle

参考地址 http://www.yilingsj.com/xwzj/2018-11-26/weixin-navigationbartitletext.html 页面最初是[在线教研] 可以在这个页面的XX.json中去配置 "navigationBarTitleText":"在线教研" 页面就有在线教研了 点击按钮 页面标题由 在线教研 变为 校验成功 getalldata是按钮的点击事件 通过 wx.setNavigationBarTitle来设置动态标题 tit

伪元素练习( css动态设置文本内容)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

动态设置图片的宽度和高度

动态设置图片控件的宽度和高度: imageView.getLayoutParams().width=600;imageView.getLayoutParams().height=400; 设置图片(src): imageView.setImageResource(resId); android获得屏幕高度和宽度: 1.WindowManager wm = (WindowManager) getContext()                     .getSystemService(Cont

JMeter非GUI方式运行时动态设置线程组及传参

在使用JMeter进行性能测试自动化时,可能会有如下需求: 1.指定运行多少线程,指定运行多少次: 2.访问的目标地址变化了,端口也变化了,需要重新指定. 上面的需求如果有GUI方式运行,这都不是问题,直接在脚本上进行修改即可以了. 但是性能测试自动化是以非GUI方式运行的,如果要修改测试计划就比较麻烦了. 下面来说说如何简单的搞定这些问题: 1.指定运行多少线程   我们知道JMeter测试计划在运行Sampler之前先加载运行属性(jmeter.properties,system.prope