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

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

页面部分

 <!-- 用户名下拉菜单 -->
<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. 【转载】 推荐算法之Thompson(汤普森)采样

    原文地址: https://www.cnblogs.com/gczr/p/11220187.html ------------------------------------------------- ...

  2. 【转载】 关于Numpy数据类型对象(dtype)使用详解

    原文地址: https://www.cnblogs.com/dreamboy2000/p/15350478.html ========================================= ...

  3. 强化学习中Q-learning,DQN等off-policy算法不需要重要性采样的原因

    在整理自己的学习笔记的时候突然看到了这个问题,这个问题是我多年前刚接触强化学习时候想到的问题,之后由于忙其他的事情就没有把这个问题终结,这里也就正好把这个问题重新的规整一下. 其实,这个DQN算法作为 ...

  4. Java学习笔记2--JDK的安装和配置

    一.进入oracle官网,下载jdk oracle官网:Oracle | Cloud Applications and Cloud Platform ps:不同的浏览器,可能进入oracle官网,会只 ...

  5. Java学习笔记1--JDK,JRE和JVM

    1.Java开发环境 Java开发环境是指Java程序员开发.编写.测试和调试Java程序所使用的所有工具和技术.Java开发环境通常由以下几个部分组成: JDK(Java Development K ...

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

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

  7. 优化系统性能:深入探讨Web层缓存与Redis应用的挑战与对策

    Web层缓存对于提高应用性能至关重要,它通过减少重复的数据处理和数据库查询来加快响应时间.例如,如果一个用户请求的数据已经缓存,服务器可以直接从缓存中返回结果,避免了每次请求都进行复杂的计算或数据库查 ...

  8. Vim:从光标位置开始全局搜索和替换

    /\v SEARCHTERM :%s/\vBEFORE/AFTER/gc

  9. 嵌入式软件开发人员有必要学习系统移植的知识吗?【ppt获取见文末】

    <从零开始学ARM>的配套视频说明 为了让粉丝更好的学习我的新书里面的知识, 一口君特地录制了配套学习视频, <从0学ARM第一期> <从0学ARM第一期> 视频已 ...

  10. win10缺少SNMP服务解决办法

    一,以管理员的身份启动Powershell 第一步在win10系统任务栏上,点击搜索图标,输入"PowerShell",如下图所示: 2 第二步搜索到PowerShell之后,鼠标 ...