VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • Vue中全局变量的定义和使用

    建站教程 2019年11月09日 关键词:,,

    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 定义全局变量的几种实现方式

    广而告之:
    热门推荐:
    layui在form表单页面通过Validform加入简单验证的方法

    form简单验证 <input type="text" name="email" datatype="e" ignore="ignore" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> datatype="e"验证邮箱 ignore="ignore"忽略,如果填写就验证没有填入邮箱就不验证 详情参考Validform_v5.3.2.js 贴···

    织梦网站如何用jQuery.lazyload延时加载图片

    第一步:在网站头部引用lazyload,可以把lazyload文件下载下来也可以直接在各大公共库中引用 <script src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.js" type="text/javascript"></script> 注···

    MySQL的增删查改语句用法示例总结

    1.创建列      alter table tablename add colname type not null default '0′;     例: alter table mmanapp_mmanmedia add appid_id integer not null default 372; 2.删除列 alter table tablename drop column colname; &···

    php实现上传图片文件代码

    代码很简单,这里我们就不多废话了,直接奉上源码 <?php // 注册表单的姓名 $name=""; $nameErr=""; if ($_SERVER["REQUEST_METHOD"]=="POST") { if (empty($_POST['name'])) { }else{ $name=$_POST['name']; if (!preg_match("/^[a-zA-Z]*$/", $name)) {···

    PHP运行SVN命令显示某用户的文件更新记录的代码

    复制代码 代码如下:<?php$user=trim($_GET['user']);$d=$_GET['date'];if(!$d){ $d=date('Ymd',time()-86400*14);}if(empty($user)){ echo "例如:svn_log.php?user=wang&date=20130118"; exit;} $cmd='/usr/bin/svn log -v -r {'.$d.'}:"HEAD" --···

    laravel框架中间件 except 和 only 的用法示例

    本文实例讲述了laravel框架中间件 except 和 only 的用法。分享给大家供大家参考,具体如下: except except:为黑名单机制,除了show页面不经过中间件Auth过滤,其他都需要过滤,如果没有通过验证,则跳转到指定的页面 only only:为白名单机制,除了edit页面需要经过中间件Auth···

    PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

    前 言 直接上代码有点不厚道、于是按照天朝传统,整段描述吧。。。。(本人语言表达能力有限,大家忍着看) 功 能 在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册。 这功能大家肯定见过,大多数网站都有的,我一直对这个功能很感兴趣···

    Vue CLI 2.x搭建vue(目录最全分析)

    一、vue-cli介绍 vue-cli是一个用于快速搭建vue项目的 脚手架。 二、vue-cli安装、更新 安装过nodeJs 、cnpm 后,全局安装vue-cli(以后其他项目可直接使用): cnpm install -g vue-cli 更新: cnpm update vue-cli 查看安装成功否(有版本号就是成功,V大写) vue -V 查看n···

    HTML5 表单验证失败的提示语问题

    前言 前端的童鞋在写页面时, 都不可避免的总会踩到 表单验证 这个坑. 这时候, 我们就要跪了, 因为要写一堆 js 来检查. 但是自从 H5 出现后, 很多常见的 表达验证 , 它都已经帮我们实现了, 让我们减轻了很多负担, 就好像下面的: 邮箱地址验证:   <!DOCTYPE html> &···

    PHP中使用file

    废话不多说,上代码: 复制代码 代码如下: $data = array(     'name' => 'Joe',     'website' => 'www.jb51.net' ); $data = http_build_query($data); $data = json_encode($data); $json = file_get_contents($url, 0, stream_context···