精华内容
下载资源
问答
  • vue实现 toggle显示隐藏效果

    千次阅读 2019-03-29 13:01:22
    背景介绍 ...2.控制页面中多个dom元素 3.控制页面中的dom元素是从服务端返回,且有多个 技术分析 1.一二场景下实现这种效果可以用v-if指令,通过设置true或false来控制dom的隐藏显示。如果控...

    背景介绍

    jQuery中有个toggle()方法,可以切换元素的显示状态,在用vue时如果不引入jQuery如何实现这种效果?

    使用场景

    常见有三种场景:

    1.控制页面中一个dom元素

    2.控制页面中多个dom元素

    3.控制页面中的dom元素是从服务端返回,且有多个

    技术分析

    1.一二场景下实现这种效果可以用v-if指令,通过设置true或false来控制dom的隐藏与显示。如果控制一个dom或多个dom我们可以在data中定义对应的flag,每次点击事件发生时 flag=!flag ,来切换flag的值。这样点击的dom可以做的显示或隐藏切换。

    2.第一和第二种场景比较简单按照上述方式可以实现,第三种场景用这种方法就不行了,因为我们不知道会从服务端返回几个dom,所以也就不能具体的定义控制dom的flag变量。这种情况下要怎么实现点击从用服务端返回的数据渲染成的dom,来达到却换隐藏和显示效果?

    实现方法

    实现第三种场景可以用Vue.set()方法。具体实现方式如下:

    1.第一步先定义一个data对象来接收从服务端返回的数据

    data(){
    
        return {
    
            listAll:{}
    
        }
    
    }

    2.先定义个toggleShow()方法:

    methods: {
    
        toggleShow(index){
    
            let obj = this.listAll[index]; // 找到点击的dom对象
    
            obj.hide = !obj.hide; // 向这个对象中添加 hide 属性
    
            this.$set(this.listAll, index, obj); // 把添加完hide 属性的新对象set()进data数据中
    
        }
    
    }

    3.在标签模板中调用toggleShow()方法

    <div v-for="(item, index) in listAll" :key="index">
    
        <card @click.native="toggleShow(index)">
    
    </card>
    
    <div v-if="item.hide ? true:false">
    
        // 显示或隐藏区域
    
    </div>
    
    </div>

    归纳总结

    实现这种需要有两种方式

    1.在data中定义固定的flag值,根据用切换flag值的方式来达到切换dom的显示或隐藏

    2.使用Vue.set()方法,在异步请求会的数据中添加临时hide属性,来控制点击的dom元素隐藏或显示

    如果不知道如何把从服务端接收的数据实时渲染的页面中,可以翻看这篇文章:

    vue异步请求的数据怎样实时渲染到页面上?

    我是李古拉雷,四年java开发,四年前端加产品,现任职今日头条前端架构师,终身学习者。据说热爱开发,热爱分享的小伙伴都关注了这个微信公众号『李古拉雷』

     

     

     

    展开全文
  • 控制页面中多个dom元素3.控制页面中的dom元素是从服务端返回,且有多个技术分析1.一二场景下实现这种效果可以用v-if指令,通过设置true或false来控制dom的隐藏显示。如果控制一个dom或多个dom我们可以...

    背景介绍

    jQuery中有个toggle()方法,可以切换元素的显示状态,在用vue时如果不引入jQuery如何实现这种效果?

    使用场景

    常见有三种场景:

    1.控制页面中一个dom元素

    2.控制页面中多个dom元素

    3.控制页面中的dom元素是从服务端返回,且有多个

    技术分析

    1.一二场景下实现这种效果可以用v-if指令,通过设置true或false来控制dom的隐藏与显示。如果控制一个dom或多个dom我们可以在data中定义对应的flag,每次点击事件发生时 flag=!flag ,来切换flag的值。这样点击的dom可以做的显示或隐藏切换。

    2.第一和第二种场景比较简单按照上述方式可以实现,第三种场景用这种方法就不行了,因为我们不知道会从服务端返回几个dom,所以也就不能具体的定义控制dom的flag变量。这种情况下要怎么实现点击从用服务端返回的数据渲染成的dom,来达到却换隐藏和显示效果?

    实现方法

    实现第三种场景可以用Vue.set()方法。具体实现方式如下:

    1.第一步先定义一个data对象来接收从服务端返回的数据

    data(){

    return {

    listAll:{}

    }

    }

    2.先定义个toggleShow()方法:

    methods: {

    toggleShow(index){

    let obj = this.listAll[index]; // 找到点击的dom对象

    obj.hide = !obj.hide; // 向这个对象中添加 hide 属性

    this.$set(this.listAll, index, obj); // 把添加完hide 属性的新对象set()进data数据中

    }

    }

    3.在标签模板中调用toggleShow()方法

    //显示或隐藏区域

    归纳总结

    实现这种需要有两种方式

    1.在data中定义固定的flag值,根据用切换flag值的方式来达到切换dom的显示或隐藏

    2.使用Vue.set()方法,在异步请求会的数据中添加临时hide属性,来控制点击的dom元素隐藏或显示

    如果不知道如何把从服务端接收的数据实时渲染的页面中,可以翻看这篇文章:

    vue异步请求的数据怎样实时渲染到页面上?

    展开全文
  • vue.js中,v-if指令可以控制元素显示隐藏,用法: &lt;div id="app" v-if="status"&gt; 我是div &lt;/div&gt; &lt;script&gt; var app = new Vue({ el: '#...

    在vue.js中,v-if指令可以控制元素的显示与隐藏,用法:

    <div id="app" v-if="status"> 
        我是div
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                status: 1
            }
        })
    </script>

    当同时要控制多个元素(比如多个div,或其他元素)的显示与否时,可以使用vue.js的内置指令template把这多个元素包含起来,如下:

    <div id="app">
        <template v-if="status">
            <p> 我是div </p>
            <p> 我是div </p>
            <p> 我是div </p>
        </template>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                status: 1
            }
        })
    </script>

    这样使用就可以让三个p标签同时控制了。

    当然template标签不会作为渲染的结果。

    展开全文
  • 都9012了,vue应该是每前端er的...2、v-show 控制元素显示or隐藏,v-if 和v-show效果表现一样,但是v-if ='false'会移除dom……当然还有很,就不一一列举了任何的的框架不可能把所有的功能都做全了。一优...
    170432209f7dc143587ff40348fe9831.png

    都9012了,vue应该是每个前端er的标配了吧,我们仅仅要会它的基本使用。今天来扯一扯vue的自定义的指令。

    vue的基础指令

    1、v-model 一般用来实现双向数据绑定的。一般结合表单控件一起使用。

    2、v-show 控制元素的显示or隐藏,v-if 和v-show效果表现一样,但是v-if ='false'会移除dom

    ……当然还有很多,就不一一列举了

    任何的的框架不可能把所有的功能都做全了。一个优秀的框架,一定会给开发者提供自定义的扩展,像jquery很强大吧,依然有很多第三方的插件,vue也不例外,可以让我们扩展自己的指令。

    工作中的需求

    一个自定义的指令,或者一个第三方的插件的由来,一定是项目中的需求产生的。好了,先来说说我的vue项目中,经常会用到的一个简单的需求。就是一个按钮我手指按下,按钮要有一个响应,手指抬起,按钮还原到初始状态。先来看效果。

    46061d8a5e8cf80d097cc1e15d923324.gif

    这里啰嗦个一句:在移动端的开发的中,不要用button做为按钮。样式太CHOU,还是用div这样的元素去封装样式吧。

    自定义指令

    我们可以在Vue类本身上扩展指令:Vue.directive('指令名称,不带v-',{ ... }),第一个参数是指令名称,第二个参数可以是一个对象,也可以是一个function,今天我们以对象为例。对象中会挂几个钩子函数

    553f23e702f826ce15fe98740fe27f09.png

    直接把官网的解释贴过来了

    今天我们要用到的是这个bind。废话少说上代码:

    7633328073cfa7dfb9f7a0e822dca30f.png
    戳我试试
    window.onload = function(){Vue.directive('press', { bind: function (el, binding) { el.addEventListener('touchstart',(e)=>{ el.style.WebkitTransform = 'scale(.94) translateY(10px)'; el.style.transform = 'scale(.94) translateY(10px)'; }); el.addEventListener('touchend',e=>{ el.style.WebkitTransform = 'scale(1) translateY(0)'; el.style.transform = 'scale(1) translateY(0)'; }); }}); new Vue({ el:"#box
    展开全文
  • Vue项目中实现权限控制管理对于一般稍大一些的后台管理系统,往往有很多个人员需要使用,而不同的人员也对应了不同的权限系统,后端的权限校验保障了系统的安全性,而前端的权限校验则提供了优秀的交互体验。...
  • 实现show为true的时候,hello world显示在页面上,当show为false的时候, ...3、mode是控制组件是先显示隐藏还是先隐藏显示,in-out表示先进场再出场,即先显示,再隐藏;out-in表示先出场再进场。 <!DOCTYPE.
  • 记录一下自己踩的坑,控制element内的table的某列显示隐藏不能...猜测:由于el-table-column会生成多行标签元素,根据v-show是不支持template语法的,推断v-show不能显示隐藏多个元素 转载于:https://www.cnblogs.c...
  • 在使用vue-awesome-swiper的时候,实现这样一功能, 点击页面的banner图(Banner.vue),进入一图片画廊(Gallary.vue),可以查看更相关的照片,但发现轮播图滚动效果失效 原因是:一开始Gallay.vue的所有用...
  • vue常用指令

    2021-01-11 21:55:34
    v-show 显示内容 ,通过css样式中display=block/none来控制元素隐藏出现 v-hide 隐藏内容 v-if 显示隐藏,v-if和v-else在判断dom的时候是直接创建和直接销毁的过程,他和v-show、v-hide不一样,这两只是隐藏啦,...
  • vue踩坑

    2019-05-08 23:36:00
    1、多个v-module框可以绑定同一个属性,但是每一个的v-module所支持的类型必须...2、v-show为控制display的显示隐藏,v-if为控制元素的创建和删除 3、当input用v-module绑定一个object类型的某一个属性使,而这个...
  • v-if和v-show的区别? 对于很初学者来说,总是有很疑问,再使用v-if和v-show两者该用哪个?什么场景该用,有点对困难选择症状...v-show 只会节点上进行对于元素进行隐藏,dom上还是有这个元素的,直接给该元素添...
  • 我的理解就是:指令是用来控制 DOM 元素的行为,例如最简单的显示隐藏Vue 中有很指令,在今后的学习过程总我们会逐步的学习,今天我们就来说说我们非常常用的两条件指令 v-if和 v-show。 v-if 看到 v-if你...
  • Vue.js笔记(2)

    2020-09-16 18:08:10
    Vue中有多个指令,这些指令通过DOM渲染,从而显示在HTML页面上。 1、v-if 和 v-else v-if 指令是条件渲染指令,根据表达式的真假(true or false)来插入和删除元素:true表示显示元素,false表示隐藏元素。 v-...
  • 属性: v-model 控制面板的显示隐藏的 特点: v-model:设置为 true,面板就开启 点击黑色遮罩层区域,面板就关闭 步骤: a. 在页面上添加一频道操作面板:默认隐藏 b. 给操作面板按钮添加一点击事件:将...
  • Vue--条件渲染

    2020-08-19 16:57:35
    Vue中可以使用v-if来控制模板里元素显示隐藏,值为true就显示,为false就隐藏 v-if控制的是 是否渲染这节点 (2) v-else-if 当有else分支逻辑的时候,可以给该元素加上v-else指令来控制,v-else会根据上面的...
  • 相同点 都可以动态控制dom元素的显示隐藏 区别 v-if:控制DOM元素的显示隐藏是将DOM元素整个添加或删除 v-show:控制DOM的显示隐藏...在请求后台接口,用接口返回数据渲染生成多个元素的时候,由于网速太慢,导致数据
  • Vue的过渡 & 动画

    2021-01-14 15:38:12
    动画的产生必须要有时间和位置或空间的变化才会产生,js动画产生的原理亦是如此,无非就是控制时间长短来显示隐藏或更改位置或变换颜色等,之后给这些动画加上一些... 针对单个元素进行动画渲染(多个元素需要使用.
  • 最近一,两月都在用vue做一后台管理中心系统,刚接触vue的时候看那些命令符号还是能看的懂,vue的特点是不去获取DOM... 常见的控制元素显示隐藏,用v-if较,也有v-show用的少。v-if=‘data’,data为true时...
  • 分支循环结构 分支结构 v-if v-eles v-eles-if v-show false 隐藏 true显示 ...v-if适用于操作不是很的情况 隐藏就是把这个元素删除掉(removeChild) v-show 频繁操作 隐藏就是display:none 循环结构 循环结...
  • v-show 通过控制元素的display css属性来控制元素显示隐藏 v-for 循环 v-on 绑定事件,可以用@符号来代替 v-bind 绑定元素的一个或者多个属性,用于动态更新html上元素的标签内容 v-slot 插槽 v-pre 跳过自己...
  • vue的v-if和v-show的区别

    2020-11-04 11:29:51
    vue项目中有时候需要控制“条件渲染”,很时候都是通过v-if或者v-show来控制的,有关二者的区别我想很多人都知道,但是最近做项目发现项目组中不少同志都搞不清,几乎都是乱用,出了问题,还判断不出来问题出在...
  • 都9012了,vue应该是每前端er的...2、v-show 控制元素显示or隐藏,v-if 和v-show效果表现一样,但是v-if ='false'会移除dom……当然还有很,就不一一列举了任何的的框架不可能把所有的功能都做全了。一优...
  • 目录vue基础vue的下载简单使用常用指令v-text、v-html 把变量值作为innerText、innerHTMLv-show 控制元素显示隐藏v-if 条件判断v-for 遍历数组、对象v-bind、v-model 数据绑定v-on 事件绑定过滤器组件内...
  • 最近用到一功能公共头部组件在特定的路由页面隐藏显示特定元素起初使用的是在特定页面单独引入公共头部进行传参,但这种方式太蠢,无法通用,后期修改复杂,代码量,重复代码。反正就是一坨辣鸡。为此调查并...
  • (CSDN是更新了吗?怎么感觉变了。) 最近打算换工作,各种原因,其实还是想学一点东西,年轻人嘛,对知识有渴望! 在这里分析一波在vue中v-if...相同点:v-if与v-show都是可以动态控制DOM元素显示隐藏的。 ...
  • vue项目中 v-if和v-show的区别最全解析

    千次阅读 2020-05-15 10:15:19
    vue项目中 v-if和v-show的区别最全解析 ...两都能实现控制显示隐藏,但是本质上有巨大的区别: 1.1 v-show v-show严格意义上说“条件隐藏”。浏览器首先不管三七二十一,把HTML元素先渲染起来,符合...

空空如也

空空如也

1 2
收藏数 36
精华内容 14
关键字:

vue控制多个元素显示隐藏

vue 订阅