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 ...
随机推荐
- 如何在通用异常处理时获取到方法名称(获取注解参数JoinPoint)
1.背景 很多时候我们在梳理公共异常时,需要获取到接口的而具体名称,便于很好的提示是那个接口错误了 2.实现逻辑 1.在controller方法上的注解上写方法名称,一般使用了swagger都有方法名 ...
- SpringBoot复习
SpringBoot 开启事务:Application 加@EnableTransactionManagement ,Service方法加@Transaction 注解 注意:@Transaction ...
- Wetab新标签页:内置实用小组件的浏览器扩展,重新定义浏览器主页
除了社交媒体,浏览器可能是我们日常工作.学习和生活中最常用的平台之一.然而,在使用浏览器的过程中,我们经常被书签管理.标签管理等问题所困扰.例如,书签栏混乱不堪,无法快速查找到所需书签. 为了和浏览器 ...
- 一文带你理解URI 和 URL 有什么区别?
当我们打开浏览器,要访问一个网站或者一个ftp服务器的时候,一定要输入一串字符串, 比如: https://blog.csdn.net/ 或者: ftp://192.168.0.111/ 这样我们就可 ...
- Linux信号量(2)-POSIX 信号量
上一章,讲述了SYSTEM V信号量,主要运行于进程之间,本章主要介绍POSIX信号量:有名信号量.无名信号量. POSIX信号量 POSIX信号量进程是3种 IPC(Inter-Process C ...
- 旧笔记本安装Win8.1实录
昨天发现一台尘封已久的Lenovo ideapad Y550,给它装上了Windows 10 然后第二天系统挂掉了 挂的原因是半夜万恶之源Windows更新开始造孽了 刚好没电 文件全坏了 真 解除封 ...
- 折腾 Quickwit,Rust 编写的分布式搜索引擎-官方配置详解
Node configuration(节点配置) 节点配置允许您为集群中的各个节点自定义和优化设置.它被分为几个部分: 常规配置设置:共享的顶级属性 Storage(存储)设置:在storage部分定 ...
- 【YashanDB知识库】自动选举配置错误引发的一系列问题
问题现象 问题出现的步骤/操作: 配置自动选举,数据库备库手动发起switch over,命令会报错 主.备库变为只读状态,数据库无法进行读写操作 shutdown immediate 停止数据库,此 ...
- Python 版本管理工具选择与 Pyenv 使用说明
Python 版本管理工具的主要作用是帮助开发者在同一台机器上管理多个 Python 版本和环境.这对于开发和部署不同项目非常有用,因为不同项目可能依赖不同的 Python 版本或者不同的包版本. 具 ...
- CSS – W3Schools 学习笔记 (1)
CSS Color Link to W3Schools 这里讲的是 color 的 value, 它可以用在许多属性上, 比如 background-color, color, border-colo ...