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

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

页面部分

 <!-- 用户名下拉菜单 -->
<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. 七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)

    教程简介 EasySQLite是一个七天.NET 8操作SQLite入门到实战详细教程(包含选型.开发.发布.部署)! 什么是SQLite? SQLite 是一个软件库,实现了自给自足的.无服务器的. ...

  2. Infinity颜值与实用兼备的新标签页,高效书签管理必选的浏览器扩展

    浏览器是我们互联网冲浪的必备平台,但是在使用浏览器的过程中,我们经常会遇到标签页和书签管理的问题.过多的标签页和书签会导致浏览器变得杂乱无章,不利于我们快速查找需要的内容.为了提高我们的工作和学习效率 ...

  3. manim边学边做--圆形类

    在manim的丰富图形库中,圆形类是一个基础且强大的模块.无论是简单的圆形绘制,还是复杂的圆形变换,它都能以简洁的代码实现. manim中圆形类的相关模块主要有3个: Circle:标准的圆形 Ann ...

  4. kubernetes中集成istio出现拉取配置中心数据失败导致服务启动失败 荐

    由于在k8s使用了grpc,所以这里我们集成istio来实现http2的自动发现以及负载均衡,但是随着节点增加,istio之前同步配置时间边长导致第一次启动时,服务启动拉取配置时istio却还没初始化 ...

  5. CentOS7 压缩及打包的常用命令

    gzip gzip 文件名 压缩文件 gzip -d 文件名 解压文件 gunzip 文件名 解压文件 gzip -1 #压缩级别 最高到9 默认是6级别 gzip -f # 强制覆盖同名压缩包 gz ...

  6. Java元注解介绍

    Java四种元注解相关介绍 概述 注解从Java1.5引入以来,不断地简化我们编写代码的流程,逐渐的也成为了我们必学的一项技术.我们学习了各种注解,学习了他们的用法,学习了他们的限制,是否想过他们的组 ...

  7. [项目] 在openharmony上跑CV

    板子资料 瑞星微 rk3568, CPU: RK3568四核64位Cortex-A55 处理器,采用全新ARM v8.2-A架构 Cortex A55 基于64位Armv8.2-A指令集设计,支持64 ...

  8. rabbitmq高可用集群搭建

    需求分析基本情况 在进行RabbitMQ搭建时,我们基于现有的连接数据和业务需求进行了深入分析.目前的统计数据显示,连接数为631,队列数为80418.为了确保业务需求的顺利满足,我们需要在云产品和自 ...

  9. 游览器 reflow

    refer: https://juejin.im/post/5a9372895188257a6b06132e reflow 伤性能. 所以要闪. 有几个频密触发的东西要留意. 1. scroll 2. ...

  10. CSS – Media Query

    前言 Media Query 是用来做 RWD 的, 类似 JS 的 if else. 写的多有伤管理, 所以要谨慎使用哦. 参考: Learn CSS Media Query In 7 Minute ...