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 ...
随机推荐
- 再探 游戏 《 2048 》 —— AI方法—— 缘起、缘灭(7) —— Python版本实现的《2048》游戏的TDL算法
<2048>游戏在线试玩地址: https://play2048.co/ 如何解决<2048>游戏源于外网的一个讨论帖子,而这个帖子则是讨论如何解决该游戏的最早开始,可谓是&q ...
- Java基础之时间类
- sqlserver 索引优化 CPU占用过高 执行分析 服务器检查[转]
SELECT TOP 10 [Total Cost] = ROUND(avg_total_user_cost * avg_user_impact * (user_seeks + user_scans) ...
- 【DVWA】安全测试工具之BurpSuite
一.应用场景 二.安装软件 官网下载地址:https://portswigger.net/burp/releases 下载版本2021.7 注册机的 Github 项目地址:TrojanAZhen/B ...
- 一个故事讲解https
1 序言 今天来聊一聊https 安全传输的原理. 在开始之前,我们来虚构两个人物, 一个是位于中国的张大胖(怎么又是你?!), 还有一个是位于米国的Bill (怎么还是你?!). 这俩哥们隔着千 ...
- python 猜数字游戏(多版本)
原始版本 print('------------------你是sb------------------') temp = input("不妨猜一下小甲鱼现在心里想的是哪个数字:" ...
- Docker 知识梳理及其安装使用
Docker 介绍 Docker 是一个强大的工具,用于高效开发.打包和部署应用程序.Docker 是一种容器管理服务.Docker 于 2013 年发布.它是开源的,可用于 Windows.macO ...
- Azure 入门系列 (第三篇 Publish Web Application to VM)
本系列 这个系列会介绍从 0 到 1 搭建一个 Web Application 的 Server. 间中还会带上一些真实开发常用的功能. 一共 6 篇 1. Virtual Machine (VM) ...
- .NET全局静态可访问IServiceProvider(支持Blazor)
DependencyInjection.StaticAccessor 前言 如何在静态方法中访问DI容器长期以来一直都是一个令人苦恼的问题,特别是对于热爱编写扩展方法的朋友.之所以会为这个问题苦恼,是 ...
- 系统编程-进程-fork深度理解、vfork简介
1. fork基本使用 #include <unistd.h> #include <stdio.h> int main(){ pid_t pid = fork(); if(pi ...