精华内容
下载资源
问答
  • vue动态该变title

    万次阅读 2019-12-09 14:12:30
    页面title动态获取,类似于博客文章标题 固定title //rooter.js { path: '/', name: 'xxx', component: () => import('./components/xxx.vue'), meta: { title: 'xxx' //设置标题 } }, 路由守卫中设置...

    博客地址:http://www.globm.top/blog/1/detail/28
    分类

    • 页面title固定值
    • 页面title动态获取,类似于博客文章标题

    固定title

    //rooter.js
    {
    	path: '/',
    	name: 'xxx',
    	component: () => import('./components/xxx.vue'),
    	meta: {
    		title: 'xxx'   //设置标题
    	}
    },
    

    路由守卫中设置改变标题

    router.beforeEach((to, from, next) => {
      if (to.matched.length === 0) {
        from.name ? next({ name: from.name }) : next({ path: 'error' })
      } else {
      // 判断路由中是否存在title
        if (to.meta.title) {
          document.title = to.meta.title
        } else {
          document.title = 'xxx'
        }
        next()
      }
    })
    

    动态改变title

    安装

    npm install vue-wechat-title --save
    

    引入main.js

    import VueWechatTitle from 'vue-wechat-title'
    
    Vue.use(VueWechatTitle)
    

    配置路由守卫

    router.beforeEach((to, from, next) => {
      if (to.matched.length === 0) {
        from.name ? next({ name: from.name }) : next({ path: 'error' })
      } else {
      // 判断路由中是否存在title
        if (to.meta.title) {
          document.title = to.meta.title
        } else {
          document.title = 'xxx'
        }
        next()
      }
    })
    

    页面使用

    //页面开始标签加入指令
    <template>
        <div v-wechat-title="title">
          //内容
    	</div>
    </template>
    
    //配置title
    <script>
    export default {
      name: 'ArticleInfo',
      data () {
        return {
          title: '测试', 
           }
      },
      created () {
        this.title = '改变后的标题'
      },
    }
    </script>
    
    展开全文
  • Vue动态组件

    千次阅读 2020-11-01 10:21:14
    Vue动态组件 通过组件的学习我们已经了解了组件的基本使用,但是我们以前使用的组件都是静态的,也就是说它是固定名字的那一个组件,今天我学习到了动态组件,它可以动态的更改自己的组件名,感觉很方便~ 我们可以...

    Vue动态组件

    通过组件的学习我们已经了解了组件的基本使用,但是我们以前使用的组件都是静态的,也就是说它是固定名字的那一个组件,今天我学习到了动态组件,它可以动态的更改自己的组件名,感觉很方便~

    我们可以在组件中通过 :is 来实现动态组件

    具体代码如下

    <div id="app">
        <div id="content">
            <component :is="com"></component>
        </div>
    
        <button @click="chooseContent(1)">首页</button>
        <button @click="chooseContent(2)">列表</button>
        <button @click="chooseContent(3)">新闻</button>
        <button @click="chooseContent(4)">个人</button>
    </div>
    
    let com1 = Vue.component("index-com",{
        template: "<h1>首页内容</h1>",
    })
    let com2 = Vue.component("list-com",{
        template: "<h1>列表内容</h1>",
    })
    let com3 = Vue.component("news-com",{
        template: "<h1>新闻内容</h1>",
    })
    let com4 = Vue.component("me-com",{
        template: "<h1>个人内容</h1>",
    })
    
    var app = new Vue({
        el: "#app",
        data: {
            com: com1
        },
        methods: {
            chooseContent: function(id){
                // console.log(id);
                // console.log(this);
                // 通过获取id,选择注册好的组件
                this.com = this.$options.components["com"+id]
            }
        },
        components: {
            com1,com2,com3,com4
        }
    })
    

    上面代码中的 this.$options 是Vue的自带属性,我们可以通过它来找到我们自定义的组件( com1, com2, com3, com4 )

    现在就已经实现了基本的动态组件,让我们看一下效果吧

    当然,这种动态组件的方法肯定是不常用的,这只是学习阶段记录一下笔记而已,后面可能要使用 Vue 脚手架中的单文件组件(.vue )

    态组件的方法肯定是不常用的,这只是学习阶段记录一下笔记而已,后面可能要使用 Vue 脚手架中的单文件组件(.vue )

    展开全文
  • vue动态css

    2019-07-31 16:48:42
    Vue动态给Style赋值,格式: <view :style='{样式名:‘+动态变量+’}' 其中在css 样式里有“-”的需要换成驼峰模式 下面记录几个常用的样式: 1.动态给背景图片赋值 <view :style="{backgroundImage:'url...

    用Vue动态给Style赋值,格式:

    <view :style='{样式名:‘+动态变量+’}'
    

    其中在css 样式里有“-”的需要换成驼峰模式
    下面记录几个常用的样式:
    1.动态给背景图片赋值

    <view  :style="{backgroundImage:'url('+item.image+')'}">
    

    应用时把item.image 替换成对应的变量
    2.动态选择css
    第一种方式:

    <view  :class="{class1:ture,class2:false}">上海</view>
    

    第二种方式:

    <view  :class="[条件?'class1':'class2']">上海</view>
    

    Loading…

    展开全文
  • vue 动态组件

    2017-07-17 10:21:52
    介绍,vue动态组件,及其动态组件切换时的动画 https://coligo.io/dynamic-components-in-vuejs/

    介绍,vue动态组件,及其动态组件切换时的动画

    https://coligo.io/dynamic-components-in-vuejs/

    展开全文
  • Vue 动态创建 component

    千次阅读 2019-05-29 17:35:30
    Vue 动态创建 组件Vue.component 方式SFC Vue 的组件可以通过两种方式来声明,一种是通过 Vue.component,另外一种则是 Single File Components(SFC) 。 以下除非特别说明,组件都是全局注册的 Vue.component 方式...
  • vue动态加载VueI18n实现国际化

    千次阅读 2019-08-14 21:49:23
    vue动态加载VueI18n实现国际化前言编写后端工程编写前端工程 前言 前一段时间给大家写了一个基于spring boot和iview的前后端分离架构,当时国际化的语言信息是直接在前端直接事先配置好的,因此当我们感觉那个国际化...
  • Vue 动态修改dom样式

    千次阅读 2019-04-08 13:40:20
    Vue 动态修改dom样式
  • vue 动态设置组件高度 虚拟动态星级 (vue-dynamic-star-rating) A Highly Customizable, easy-to-use elegant stars rating component (similar to Google Play) 高度可定制,易于使用的优雅星级评定组件(类似于...
  • Vue动态改变样式实战

    千次阅读 2020-08-30 10:24:14
    一点睛 ... 2通过computed返回一个对象,对象...二vue动态改变样式 1代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue动态改变样式</title> <s...
  • vue 动态修改页面标题title

    千次阅读 2019-05-15 10:31:17
    vue 动态修改页面标题title 1.安装 npm install vue-wechat-title --save 或 npm install vue-wechat-title -S 2.使用 在main.js中引用插件 import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle...
  • vue动态路由跳转

    2020-09-20 15:03:12
    vue动态路由跳转有push、replace等方法。最近有个需求是需要从不同的路由点击某个操作按钮进行路由跳转。 之前用的是replace方法,因为要带参数,想到的办法是用模板字符串把所有的参数拼接在地址栏上传参过去。 ...
  • Vant Design Vue 动态表单校验
  • vue动态引入组件

    千次阅读 2019-09-27 17:28:12
    vue动态引入组件 <el-main> <component :is="selectIndex" @changeMenu="selectMenu" :id="componentId" ></component> </el-main> <script> i...
  • vue动态路由匹配实例

    千次阅读 2017-11-21 10:15:37
    vue动态路由匹配实例
  • Vue 动态赋值 class

    千次阅读 2018-09-14 08:48:36
    版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82696881 Vue 动态赋值 class ...
  • vue动态绑定input,动态添加input

    千次阅读 2019-12-19 17:20:11
    vue动态绑定input,动态添加input 技术:vue+elemen-ui 原理:数组遍历出input,每点一下push一次。 <template> <!-- test 测试使用 --> <div class="test"> <div v-for="(module,index) ...
  • vue动态style和动态伪类元素 在css中使用“- -”为前缀定义变量, 使用var()函数来读取定义的css变量: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • vue动态数据绑定prop

    2020-08-05 16:56:58
    vue动态数据绑定props思维导读图代码效果 思维导读图 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript...
  • vue 动态添加input输入框

    千次阅读 2019-10-30 09:31:41
    vue 动态添加input输入框 实现需求:请求到后台数据是String以","隔开的,要求要以input框的方式来增删改,最后以String的数据格式提交给后台 data() { return { str: "aaaa,bbbbb,ccccc", mylist: [] }; }, ...
  • Ant design vue 动态表单

    千次阅读 2020-06-05 17:04:36
    Ant design vue 动态表单 1、官方示例 首先我们先看一下官网给出的示例: 点击Add filed 会增加一个新的input输入框 点击删除的时候可以删除该行input框 下面给出官网的demo示例: <template> <a-form :...
  • vue动态添加style样式

    万次阅读 2019-08-22 02:28:49
    注意: 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff 【对象】 ...
  • vue动态生成表单组件vue-generate-form

    千次阅读 2018-12-25 13:04:50
    Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明所以要根据数据来生成表单 只能使用Vue的render函数要做这一个组件 其实并不难 看一下Vue官方示例 再找...
  • vue动态绑定背景图片

    千次阅读 2019-04-18 16:04:25
    vue动态绑定背景图片 html代码: <html> <template> <div class="itemBox"> <div class="item" v-for="(ele,i) in goalList" :key="i" :style="{'backgroundImage': 'url(' + ele.bg + ...
  • Vue动态生成表单组件vue-form-maker

    千次阅读 2018-12-25 10:30:52
    Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 整体组件布局方式借鉴了form-create的写法 在此表示感谢 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的...
  • vue 动态添加删除input

    千次阅读 2020-05-27 15:43:40
    vue 动态添加删除input 删除我隐藏掉了 <div v-for="(list,index) in lists"> <ul class="add-line"> <li class="add-line" > <el-input v-model="list.name" placeholder="请输入名称...
  • Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的render函数 要做这一个组件 其实并不难 看一下Vue官方示例 ...
  • vue 动态获取当前路由信息

    千次阅读 2019-06-25 15:31:40
    vue 动态获取当前route路由信息 watch: { $route: { handler: function(route) { console.log(route) }, immediate: true } },
  • vue动态路由的创建

    千次阅读 2019-04-17 09:53:19
    vue动态路由的创建 首先,需要后端的配合通过login拿到router的path;然后再组装每一个路由所需要的元素;比如title、children、component、meta等,其中最重要的就是children、component,尤其是component的组装...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,146
精华内容 9,658
关键字:

vue动态

vue 订阅