计算属性:故名思意也是一种属性,可以用插值表达式直接调用

废话不多说,直接上代码:

页面部分

 <!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{username}}
<i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>

js部分

computed: {
username() {
let userSO = sessionStorage.getItem("userSO",userSO);
let username =userSO.userName;
return username;
/* let username = localStorage.getItem("ms_username");
return username ? username : "admin"; */
}
},

vue之计算属性computed模板的更多相关文章

  1. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  2. Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

  3. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  4. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  5. vue中计算属性computed方法内传参

    vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...

  6. Vue.js 计算属性computed和methods的区别

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...

  7. vue 的计算属性computed自我理解

    类型:{ [key: string]: Function | { get: Function, set: Function } } 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算.注意, ...

  8. vue从入门到进阶:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  9. Vue教程:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  10. Vue学习3:计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. SMU Summer 2023 Contest Round 5

    SMU Summer 2023 Contest Round 5 A. Points in Segments \(\mathcal{O}(n \times m)\) 做法数据范围小,直接把每次的\(l ...

  2. 2023 ECF 游记

    录播 闭幕式 回顾 1.11 本来计划下午 vp 去年的 ecf,结果 zjj 忘记买票来投奔我了,所以鸽了.分块和莫队也没看 晚上收拾东西,完全装不下,应该早点寄走一些东西的 1.12 昨晚还想着别 ...

  3. [HCTF 2018]admin 1

    [HCTF 2018]admin 1 < 文章中有有关flask session 文章 需要认真读一下> 1.信息搜集 由题意,注册admin 用户,回显 The username has ...

  4. zabbix 自定义用户key与参数userparameters监控监本输出

    zabbix在模板中预定义了一些key,但通常情况,并不能满足我们的需求.幸运的是zabbix提供了自定义key的方法,因此我们可以灵活的监控各种我们想要监控的数据. 定义key有两种修改方式: vi ...

  5. 图解Zabbix设置邮件报警

    Zabbix设置邮件告警   前提条件: Zabbix Server 和 Zabbix Agent都已安装完毕,并已启动   1.添加主机   2.配置邮件告警,这里以VSFTP服务为例 yum in ...

  6. Centos7.6下安装Docker环境

    1.首先查看服务器系统内核,docker环境要求的内核必须在3.10或以上 执行:uname -r 版本为3.10,可安装docker 2.切到root用户下,更新yum源,使yum源为最新状态 执行 ...

  7. Cookie的secure属性引起循环登录问题分析及解决方案

    作者:来自 vivo 互联网服务器团队- Wang Fei 单点登录作为公共组件,在各个公司内部被各个系统所广泛使用,但是在使用过程中我们会遇到各种各样的问题,其中循环登录问题就是一个比较经典的问题. ...

  8. sql转JSON为表

    创建方法 : /****** Object: UserDefinedFunction [dbo].[parseJSON] Script Date: 2017/7/11 18:27:28 ******/ ...

  9. EF Core – Table / Entity Splitting

    参考 Docs – Advanced table mapping Table Splitting Table Splitting 指的是把一个表映射到多个 Entity,或者反过来说就是把多个 Ent ...

  10. 从0开始计算机体系结构的学习(一):FGPA预备知识与Vivado环境搭建

    引入与预备知识 什么是FPGA? FPGA(Field-Programmable Gate Array,现场可编程门阵列)是一种集成电路(IC),其硬件功能可以通过用户在现场编程来定义.与传统的ASI ...