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

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

页面部分

 <!-- 用户名下拉菜单 -->
<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. 如何在通用异常处理时获取到方法名称(获取注解参数JoinPoint)

    1.背景 很多时候我们在梳理公共异常时,需要获取到接口的而具体名称,便于很好的提示是那个接口错误了 2.实现逻辑 1.在controller方法上的注解上写方法名称,一般使用了swagger都有方法名 ...

  2. SpringBoot复习

    SpringBoot 开启事务:Application 加@EnableTransactionManagement ,Service方法加@Transaction 注解 注意:@Transaction ...

  3. Wetab新标签页:内置实用小组件的浏览器扩展,重新定义浏览器主页

    除了社交媒体,浏览器可能是我们日常工作.学习和生活中最常用的平台之一.然而,在使用浏览器的过程中,我们经常被书签管理.标签管理等问题所困扰.例如,书签栏混乱不堪,无法快速查找到所需书签. 为了和浏览器 ...

  4. 一文带你理解URI 和 URL 有什么区别?

    当我们打开浏览器,要访问一个网站或者一个ftp服务器的时候,一定要输入一串字符串, 比如: https://blog.csdn.net/ 或者: ftp://192.168.0.111/ 这样我们就可 ...

  5. Linux信号量(2)-POSIX 信号量

    ​上一章,讲述了SYSTEM V信号量,主要运行于进程之间,本章主要介绍POSIX信号量:有名信号量.无名信号量. POSIX信号量 POSIX信号量进程是3种 IPC(Inter-Process C ...

  6. 旧笔记本安装Win8.1实录

    昨天发现一台尘封已久的Lenovo ideapad Y550,给它装上了Windows 10 然后第二天系统挂掉了 挂的原因是半夜万恶之源Windows更新开始造孽了 刚好没电 文件全坏了 真 解除封 ...

  7. 折腾 Quickwit,Rust 编写的分布式搜索引擎-官方配置详解

    Node configuration(节点配置) 节点配置允许您为集群中的各个节点自定义和优化设置.它被分为几个部分: 常规配置设置:共享的顶级属性 Storage(存储)设置:在storage部分定 ...

  8. 【YashanDB知识库】自动选举配置错误引发的一系列问题

    问题现象 问题出现的步骤/操作: 配置自动选举,数据库备库手动发起switch over,命令会报错 主.备库变为只读状态,数据库无法进行读写操作 shutdown immediate 停止数据库,此 ...

  9. Python 版本管理工具选择与 Pyenv 使用说明

    Python 版本管理工具的主要作用是帮助开发者在同一台机器上管理多个 Python 版本和环境.这对于开发和部署不同项目非常有用,因为不同项目可能依赖不同的 Python 版本或者不同的包版本. 具 ...

  10. CSS – W3Schools 学习笔记 (1)

    CSS Color Link to W3Schools 这里讲的是 color 的 value, 它可以用在许多属性上, 比如 background-color, color, border-colo ...