首页 > TAG信息列表 > isShow

Vue 子组件修改父组件传递过来的值

实现效果:通过点击选中的按钮控制左边的树是否进行展示         子组件篇: <el-button v-if="isShowTree&hasTree" type="text" icon="btn-arrow iconfont icon-icon_arrow_left" style="margin-left:-30px;margin-top:-15px;position:absolute"

视频直播app源码,实现一个展开和关闭的动画效果

视频直播app源码,实现一个展开和关闭的动画效果 <template>  <div>    <el-button @click="changeShow(true)">展开</el-button>    <el-button @click="changeShow(false)">关闭</el-button>    <div class="mr_sty" :class=&q

uni-app 实现 车牌键盘

上篇实现了个uview组件的车牌键盘,今天来实现一个纯手写的,智能化的车牌键盘,先看个效果图 上代码,先实现个基本的样式 <view class="car_num-text"> <template v-for="(item,index) in brand"> <text v-if="item == '+'" :key='index' class="

v-show的用法

1.v-show指令的作用是:根据切换元素的显示状态2.原理是修改元素 的display,实现显示隐藏3.指令后面的内容,最终都会解析为布尔值4.值为true元素显示,值为false元素隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=

v-if和v-else

v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truth值的时候被渲染。 v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。 用法: <div id="app"> <section v-if="isShow"> <!-- isShow 为 true 时,显

$emit改成插槽slot

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d

学生管理系统 v2.0

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid

学生管理系统 v1.1

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid

Android开发 WindowInsetsController 窗口控制器

前言   在Android11后,google推出了WindowInsetsController 来取代之前复杂麻烦的窗口控制. 意在将Android的窗口控制更简单. 这里说明下什么是窗口控制,在Android手机里,状态栏,导航栏.输入法等等这些与app无关,但是需要配合app一起使用的窗口部件. 另外注意WindowInsetsContro

angular中从0到1:条件语句ngIf、ngSwitch的使用

原文链接:这里 0.前言 angular中的if在,一种是 *ngIf=”expression” ,一般写在html中。这篇文章主要记录*ngIf的几种用法。 1. ngIf用法 1.1可以用作显示和隐藏 HTML <div *ngIf="isShow" > 窗前明月光 </div> <button (click)="change()">显示/隐藏</button> TS

vue 中 实现手动(半自动)监听sessionStorage 中的数据变化

实现 sessionStorage 的监听 在main.js中 挂载resetSetStorageEvent()方法到vue原型链上 两个参数 : key指的是:sessionStorage中需要监听的键名 newVal指的是:sessionStorage中需要监听的键值 Vue.prototype.resetSetStorageEvent = function(key, newVal) { if (key === 'isShow')

element-ui MessageBox 和 Tooltip一起使用的bug

使用Tooltip组件包裹的元素触发MessageBox弹窗在关闭弹窗时会导致Tooltip状态可见。 解决方法: manual属性设置为true把Tooltip改为手动控制模式 v-model控制状态是否可见 native和prevent修饰符监听mouseenter和mouseleave事件 具体代码如下: 1 <template> 2 <el-tooltip

VUE element ui tree树形控件修改功能

之前在网上很少能找到对应的方法,所以在此记录一下。 需求是点击每个选项的按钮后弹出一个input框,示例如下 要想实现每行选项都加上+、-、/符号要通过自定义来实现,在这我选择renderContent方法 renderContent(h, { node, data, store }) { return ( <span cla

彻底明白VUE修饰符sync(转载)

本文转载,仅作为记录。链接:https://www.jianshu.com/p/d42c508ea9de 对于VUE的初学者来讲,肯定会感觉prop的写法很麻烦,很讨厌!你肯定想如果prop也可以实现双向绑定那怎是一个爽字了得!不过现实是残酷的,如果子组件可以任意修改父组件的内容,那势必会带来数据的混乱,从而造成维护的困扰!

CSS——遮罩层

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> p { width: 300px; height: 300px; background: yellow; position: absolute; left: 500px; top: 300px; dis

WPF DataGrid控件隐藏栏显示

WPF DataGrid控件隐藏栏显示 一、先添加一个类BindingProxy: public class BindingProxy : Freezable { protected override Freezable CreateInstanceCore() => new BindingProxy(); public object Data { get => GetValue(DataPro

Vue的过渡动画3(使用velocity)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>31-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{

vue给已经渲染的对象添加属性,如果更新此属性的值,不会更新视图

1.问题:新接到的需求,需要给从后台获取的数据添加一个状态值来在前端界面决定是否显示。 2.解决办法:刚开始以为很简单,直接遍历一遍从后台获取的数据,再使用data[i].isShow = false就可以了,再按条件决定是否显示内容。 3.遇到的困难:可是运行代码后却发现没办法按条件显示,打印修

Vue better-scroll实现详情页吸顶动画

<header> <!-- 下滑50px后消失 --> <div class="header-returns" v-show="isShow"> <div> <i class="iconfont icon-fanhui"></i> </div> <div>

Vue基础 第五讲笔记:v-show、v-if、v-bind

一、v-show 根据真假切换元素的显示状态。 注意: 1、原理是修改元素display,实现显示隐藏。 2、指令后面的内容,最终都会解释为布尔值。 3、值为true元素显示,值为false元素隐藏。 实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head>

常用的生命周期函数

 import React, { Component } from 'react'    class Cpn extends Component{    render(){       return (         <div>我是Cpn组件</div>       )    }    componentWillUnmount(){      console.log('调用了cpn的componen

Vue-强制刷新

1、key-changing(最好)         使用key标记组件身份,当key改变时释放原始组件,重新加载新的组件。 <template> <div :key="key"> <div>{{val}}</div> ... </div> </template> <script> export default { data() {

react+ts使用别名

react+typescript使用别名 创建文件(文件名必须使用.d.ts文件*) // 文件名是index.d.ts // declare 表示这个别名是一个全局的(在其他文件使用的时候,不需要导入,直接就可以使用) declare namespace IndexInterface { interface bodyTitleInterface { name: String,

Vuejs学习笔记(二)-13.插槽作用域

一、什么是编译作用域 官方准则:父组件模板的所有内容都会在父级作用域内编辑,子组件模板所有内容会在子级作用域内编译。 举个例子,在父组件Vue实例内定义一个变量 isShow=true,在子组件内也定义一个变量isShow=false,现在在父组件模板内的子组件中使用使用isShow,那么现在用的是哪一

vue中关于组件的知识

创建组件: 有两种方法,一种通过 Vue.component,另一种为Vue.extent,下面分别介绍: 通过Vue.extent注册构造函数,然后在将实例对象挂载到指定节点 新建一个工具文件,让后在main.js中引入,完事挂在prototype上面 例子: import Vue from "vue"; import Modal from "@/components