vue之计算属性computed模板
计算属性:故名思意也是一种属性,可以用插值表达式直接调用
废话不多说,直接上代码:
页面部分
<!-- 用户名下拉菜单 -->
<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模板的更多相关文章
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别
一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- Vue.js 计算属性computed和methods的区别
在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...
- vue 的计算属性computed自我理解
类型:{ [key: string]: Function | { get: Function, set: Function } } 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算.注意, ...
- vue从入门到进阶:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- Vue教程:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- Vue学习3:计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
随机推荐
- SMU Summer 2023 Contest Round 5
SMU Summer 2023 Contest Round 5 A. Points in Segments \(\mathcal{O}(n \times m)\) 做法数据范围小,直接把每次的\(l ...
- 2023 ECF 游记
录播 闭幕式 回顾 1.11 本来计划下午 vp 去年的 ecf,结果 zjj 忘记买票来投奔我了,所以鸽了.分块和莫队也没看 晚上收拾东西,完全装不下,应该早点寄走一些东西的 1.12 昨晚还想着别 ...
- [HCTF 2018]admin 1
[HCTF 2018]admin 1 < 文章中有有关flask session 文章 需要认真读一下> 1.信息搜集 由题意,注册admin 用户,回显 The username has ...
- zabbix 自定义用户key与参数userparameters监控监本输出
zabbix在模板中预定义了一些key,但通常情况,并不能满足我们的需求.幸运的是zabbix提供了自定义key的方法,因此我们可以灵活的监控各种我们想要监控的数据. 定义key有两种修改方式: vi ...
- 图解Zabbix设置邮件报警
Zabbix设置邮件告警 前提条件: Zabbix Server 和 Zabbix Agent都已安装完毕,并已启动 1.添加主机 2.配置邮件告警,这里以VSFTP服务为例 yum in ...
- Centos7.6下安装Docker环境
1.首先查看服务器系统内核,docker环境要求的内核必须在3.10或以上 执行:uname -r 版本为3.10,可安装docker 2.切到root用户下,更新yum源,使yum源为最新状态 执行 ...
- Cookie的secure属性引起循环登录问题分析及解决方案
作者:来自 vivo 互联网服务器团队- Wang Fei 单点登录作为公共组件,在各个公司内部被各个系统所广泛使用,但是在使用过程中我们会遇到各种各样的问题,其中循环登录问题就是一个比较经典的问题. ...
- sql转JSON为表
创建方法 : /****** Object: UserDefinedFunction [dbo].[parseJSON] Script Date: 2017/7/11 18:27:28 ******/ ...
- EF Core – Table / Entity Splitting
参考 Docs – Advanced table mapping Table Splitting Table Splitting 指的是把一个表映射到多个 Entity,或者反过来说就是把多个 Ent ...
- 从0开始计算机体系结构的学习(一):FGPA预备知识与Vivado环境搭建
引入与预备知识 什么是FPGA? FPGA(Field-Programmable Gate Array,现场可编程门阵列)是一种集成电路(IC),其硬件功能可以通过用户在现场编程来定义.与传统的ASI ...