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

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

页面部分

 <!-- 用户名下拉菜单 -->
<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. 再探 游戏 《 2048 》 —— AI方法—— 缘起、缘灭(7) —— Python版本实现的《2048》游戏的TDL算法

    <2048>游戏在线试玩地址: https://play2048.co/ 如何解决<2048>游戏源于外网的一个讨论帖子,而这个帖子则是讨论如何解决该游戏的最早开始,可谓是&q ...

  2. Java基础之时间类

  3. sqlserver 索引优化 CPU占用过高 执行分析 服务器检查[转]

    SELECT TOP 10 [Total Cost] = ROUND(avg_total_user_cost * avg_user_impact * (user_seeks + user_scans) ...

  4. 【DVWA】安全测试工具之BurpSuite

    一.应用场景 二.安装软件 官网下载地址:https://portswigger.net/burp/releases 下载版本2021.7 注册机的 Github 项目地址:TrojanAZhen/B ...

  5. 一个故事讲解https

    1   序言 今天来聊一聊https 安全传输的原理. 在开始之前,我们来虚构两个人物, 一个是位于中国的张大胖(怎么又是你?!), 还有一个是位于米国的Bill (怎么还是你?!). 这俩哥们隔着千 ...

  6. python 猜数字游戏(多版本)

    原始版本 print('------------------你是sb------------------') temp = input("不妨猜一下小甲鱼现在心里想的是哪个数字:" ...

  7. Docker 知识梳理及其安装使用

    Docker 介绍 Docker 是一个强大的工具,用于高效开发.打包和部署应用程序.Docker 是一种容器管理服务.Docker 于 2013 年发布.它是开源的,可用于 Windows.macO ...

  8. Azure 入门系列 (第三篇 Publish Web Application to VM)

    本系列 这个系列会介绍从 0 到 1 搭建一个 Web Application 的 Server. 间中还会带上一些真实开发常用的功能. 一共 6 篇 1. Virtual Machine (VM) ...

  9. .NET全局静态可访问IServiceProvider(支持Blazor)

    DependencyInjection.StaticAccessor 前言 如何在静态方法中访问DI容器长期以来一直都是一个令人苦恼的问题,特别是对于热爱编写扩展方法的朋友.之所以会为这个问题苦恼,是 ...

  10. 系统编程-进程-fork深度理解、vfork简介

    1. fork基本使用 #include <unistd.h> #include <stdio.h> int main(){ pid_t pid = fork(); if(pi ...