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 ...
随机推荐
- 七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)
教程简介 EasySQLite是一个七天.NET 8操作SQLite入门到实战详细教程(包含选型.开发.发布.部署)! 什么是SQLite? SQLite 是一个软件库,实现了自给自足的.无服务器的. ...
- Infinity颜值与实用兼备的新标签页,高效书签管理必选的浏览器扩展
浏览器是我们互联网冲浪的必备平台,但是在使用浏览器的过程中,我们经常会遇到标签页和书签管理的问题.过多的标签页和书签会导致浏览器变得杂乱无章,不利于我们快速查找需要的内容.为了提高我们的工作和学习效率 ...
- manim边学边做--圆形类
在manim的丰富图形库中,圆形类是一个基础且强大的模块.无论是简单的圆形绘制,还是复杂的圆形变换,它都能以简洁的代码实现. manim中圆形类的相关模块主要有3个: Circle:标准的圆形 Ann ...
- kubernetes中集成istio出现拉取配置中心数据失败导致服务启动失败
荐
由于在k8s使用了grpc,所以这里我们集成istio来实现http2的自动发现以及负载均衡,但是随着节点增加,istio之前同步配置时间边长导致第一次启动时,服务启动拉取配置时istio却还没初始化 ...
- CentOS7 压缩及打包的常用命令
gzip gzip 文件名 压缩文件 gzip -d 文件名 解压文件 gunzip 文件名 解压文件 gzip -1 #压缩级别 最高到9 默认是6级别 gzip -f # 强制覆盖同名压缩包 gz ...
- Java元注解介绍
Java四种元注解相关介绍 概述 注解从Java1.5引入以来,不断地简化我们编写代码的流程,逐渐的也成为了我们必学的一项技术.我们学习了各种注解,学习了他们的用法,学习了他们的限制,是否想过他们的组 ...
- [项目] 在openharmony上跑CV
板子资料 瑞星微 rk3568, CPU: RK3568四核64位Cortex-A55 处理器,采用全新ARM v8.2-A架构 Cortex A55 基于64位Armv8.2-A指令集设计,支持64 ...
- rabbitmq高可用集群搭建
需求分析基本情况 在进行RabbitMQ搭建时,我们基于现有的连接数据和业务需求进行了深入分析.目前的统计数据显示,连接数为631,队列数为80418.为了确保业务需求的顺利满足,我们需要在云产品和自 ...
- 游览器 reflow
refer: https://juejin.im/post/5a9372895188257a6b06132e reflow 伤性能. 所以要闪. 有几个频密触发的东西要留意. 1. scroll 2. ...
- CSS – Media Query
前言 Media Query 是用来做 RWD 的, 类似 JS 的 if else. 写的多有伤管理, 所以要谨慎使用哦. 参考: Learn CSS Media Query In 7 Minute ...