交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • Vue中全局变量的定义和使用

    1.工作中遇到的两类问题

    --------------------------------------------------------------------------------

    1.1 状态值(标志)

    A界面赋值的a变量,作为记录状态值(标志)需要被其他几个界面使用。其他几个界面亦可以改变a状态值。

    1.2 传递字段

    A界面有a字段,B界面没有a字段,但需要调用a字段。

    2.解决方法

    --------------------------------------------------------------------------------

    2.1 VUEX

    使用VUEX管理状态与字段值,但有种杀鸡用牛刀的感觉,稍微显重了一点。

    2.2 使用全局变量法管理状态与字段值

    轻量,简单。
    故本文使用全局变量法解决1中提出的两个问题

    3.具体实现

    --------------------------------------------------------------------------------

    3.1创建全局文件

    在工具文件夹,创建glabal_val.js

    3.2创建全局变量和设置全局变量的方法如下

    export default{
     sso_flag:"0",
     set_sso_lag(sso_flag){
       this.sso_flag = sso_flag;
     }
    }

    3.3导入数据(全局变量)

    import global from '@/utils/global_val'

    3.4在 A界面设置全局变量的状态位

    global.set_sso_flag(1)
    也可global.set_sso_flag=this.sso_flag直接进行赋值

    3.5在B界面判断

    在B界面DOM 标签里结合VUE的v-if,v-else-if指令进行逻辑判断

    <div v-if="global.sso_flag==0">
    </div>
    <div v-else-if="global.sso_flag==1">
    </div>

    总结

    以上所述是小编给大家介绍的VUE中全局变量的定义和使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • VUE 全局变量的几种实现方式
    • vue定义全局变量和全局方法的方法示例
    • Vue引入sass并配置全局变量的方法
    • 浅谈在vue项目中如何定义全局变量和全局函数
    • Vue中定义全局变量与常量的各种方式详解
    • vue 如何添加全局函数或全局变量以及单页面的title设置总结
    • 详解VUE 定义全局变量的几种实现方式

    广而告之:
    热门推荐:
    php curl 伪造IP来源的实例代码

    curl发出请求的文件fake_ip.php: 代码 复制代码 代码如下: <?php $ch = curl_init(); $url = "http://localhost/target_ip.php"; $header = array( 'CLIENT-IP:58.68.44.61', 'X-FORWARDED-FOR:58.68.44.61', ); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($c···

    PHP计算指定日期所在周的开始和结束日期的方法

    本文实例讲述了PHP计算指定日期所在周的开始和结束日期的方法。分享给大家供大家参考。具体实现方法如下: <html> <head> <title>计算一周开始结束日期</title> </head> <body> <form method="post" action="./index.html" enctype="u···

    C#中TrimStart,TrimEnd,Trim在javascript上的实现

    于是乎,自己动手写了个!!看到很多人都是用正则,咱不会,就用了最土的方法来实现了!帖上代码吧!希望对大家有所帮助!!! 复制代码 代码如下: String.prototype.trimStart = function(trimStr){ if(!trimStr){return this;} var temp = this; while(true){ if(temp.substr(0,t···

    使用纯javascript实现放大镜效果

    jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目,应用到项目上有诸多不便,自己抽点时间自己写了个类似插件,积累下代码,何乐而不为呢!!let‘go: 打算把此特效封装成个插件,先把最基本的算法实现,然后再一步步封装吧: 最终实现效果: html 代码: 复制代···

    百度统计数据报告,百度统计可以查看哪些数据报告

    百度统计数据报告提供七种数据报告,分别为:流量分析报告、来源分析报告、百度推广报告、访问分析报告、转化分析报告、优化分析报告、访客分析报告。站长可以通过这些数据改善网站的质量与推广。

    PHP实现打包下载文件的方法示例

    本文实例讲述了PHP实现打包下载文件的方法。分享给大家供大家参考,具体如下: /** * 下载文件 * @param $img * @return string */ public function Download($img) { $items = []; $names = []; if($img) { //用于前端跳转zip链接拼接 $path_red···

    PHP $

    $_FILES['file']['error']值 UPLOAD_ERR_OK: 0 //正常,上传成功 UPLOAD_ERR_INI_SIZE: 1 //上传文件大小超过服务器允许上传的最大值,php.ini中设置upload_max_filesize选项限制的值 UPLOAD_ERR_FORM_SIZE: 2 //上传文件大小超过HTML表单中隐藏域MAX_FILE_SIZE选项指···

    Javascript中常见的逻辑题和解决方法

    一、统计数组 arr 中值等于 item 的元素出现的次数 function count(arr, item) { var count = 0; arr.forEach(function(e){ //e为arr中的每一个元素,与item相等则count+1 e == item ? count++ : 0; }); return count; } function count(arr, it···

    帝国6.6版本新增信息快速修改基本属性功能,修改更方便

    帝国CMS 6.6版新增信息快速修改基本属性功能,加载页面更快,修改更方便。 上传以下图片:

    在IIS下安装PHP扩展的方法(超简单)

    很多网上的文章在介绍IIS下安装PHP的时候都会涉及到很多配置的修改,其实大部分都是不必要的,对于需要查找如何安装PHP扩展的人来说,其实最需要的或许只是一个现在就能用的版本,在这个时候引入过多的不必要的配置我认为是低效的。 那么归纳一下其实安装步骤只需要三步: 1.下···