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

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

页面部分

 <!-- 用户名下拉菜单 -->
<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. Redis中的Hash类型常用命令

    一.hset命令作用:设置hash类型值:格式:hset key field value案例:192.168.0.111:0>hset product name 苹果"1" ...

  2. AI 大模型时代呼唤新一代基础设施,DataOps 2.0和调度编排愈发重要

    在 AI 时代,DataOps 2.0 代表了一种全新的数据管理和操作模式,通过自动化数据管道.实时数据处理和跨团队协作,DataOps 2.0 能够加速数据分析和决策过程.它融合了人工智能和机器学习 ...

  3. 公众号3w粉丝了,说说我的下一步计划吧

    终于30000了 不知不觉,已经3w粉丝了,2020年8月8日到现在一共1年零6个月. 到目前为止,原创文章一共 194 篇, 文章头条阅读量基本在1000-3000, 也终于有了两篇文章阅读过万. ...

  4. Linux下简单几步安装AI开发环境-ROS(超有意思)

    机缘巧合,接触到了一个开源的项目ROS,只需要根据一口君的操作,就可以很容易搭建一个具有3d效果的开发环境,非常有意思,和大家分享下. 0.什么是ROS ROS(Robot Operating Sys ...

  5. Microsoft Build Next-Gen Windows Dev (placeholder)

    This is a placeholder page for Microsoft Build after party in next Month. Will update once I get det ...

  6. 从源码分析 SpringBoot 的 LoggingSystem → 它是如何绑定日志组件的

    开心一刻 今天心情不好,想约哥们喝点 我:心情不好,给你女朋友说一声,来我家,过来喝点 哥们:行!我给她说一声 我:你想吃啥?我点外卖 哥们:你俩定吧,我已经让她过去了 我:???我踏马让你过来!和她 ...

  7. 使用 python flask 框架实现一个简单的抽奖系统

    Flask 实现一个简易的抽奖系统 项目前置知识 目前 python主流的框架: Django .flask .Tornado 简介: 1.框架 框架? 为什莫使用框架? (前置知识讲解比较冗杂,望谅 ...

  8. 修改 Ubuntu 文件夹为英文

    如果你在安装 Ubuntu 时,语言选了中文,那么系统自动创建的文件夹也会是中文(下载.图片 等).有时这会造成不便.可以通过以下命令将文件夹改为英文: LANG=C LC_ALL=C xdg-use ...

  9. Ubuntu 修改密码

    强制修改密码 可以通过切换到 root 帐户强制修改密码来绕过密码长度限制: sudo su # 切换到 root 帐户 passwd USER # 修改密码 或者: sudo passwd $(wh ...

  10. Ubuntu 设置远程桌面(RDP)

    安装桌面环境 如果你的 Ubuntu 还没有安装桌面环境,可以选择以下之一安装: GNOME GNOME 是 Ubuntu Desktop 原生桌面环境. # 安装基本的 GNOME 桌面环境 sud ...