精华内容
下载资源
问答
  • vue 控制元素显示隐藏

    万次阅读 2019-08-21 19:07:30
    使用v-show 和v-if 都可以实现元素显示隐藏 v-if 会直接删除元素 v-show 只是隐藏,只是简单地切换元素的 CSS 属性display。 <divv-show="showGroup"> <divclass="formTitle">图层组</div>...

    解决方案:

    •  使用 v-show  和 v-if  都可以实现元素显示和隐藏
    • v-if 会直接删除元素
    • v-show 只是隐藏,只是简单地切换元素的 CSS 属性display。

       <div v-show="showGroup">
            <div class="formTitle">图层组</div >
        </div >

    比如想要隐藏 上面这个div  那么给这个div加一个  v-show的属性。名字你随便起

    然后再js代码中  设置 showGroup的默认值 为false,也就是刚启动的时候,默认是不显示的,后面如果想要显示这个div,那么可以直接设置vm.showGroup=true即可

    展开全文
  • 使用vue控制元素显示隐藏

    千次阅读 2019-07-04 16:44:01
    HTML代码:<div title="意向价格" v-if="showPrise"></div> <div title="意向租金" v-if="showRentPrise"></div> JS代码: new Vue({ el: '#app', data: { showPris...

    HTML代码:
     <div title="意向价格"   v-if="showPrise"></div>
     <div title="意向租金"   v-if="showRentPrise"></div>


    JS代码:
        new Vue({
            el: '#app',
            data: {
                showPrise:false,
                showRentPrise:false
             } 
            methods: {
               changeStatus(){
                  if("你设置的条件"){
                      showPrise = true;
                      showRentPrise = true;  
                  }
               }
            }
         })


    解释:
    默认showPrise和showRentPrise的状态是false,所以是隐藏的。
    当你在changeStatus通过了某种条件,你就可以控制showPrise和showRentPrise的状态了。true为显示,false为隐藏。
     

    展开全文
  • in-out:多个元素切换的时候,先显示隐藏 out-in:多个元素切换的时候,先隐藏显示 <template> <div class="wrap"> <transition mode="out-in"> <div v-if="show" key="hello">hel

    一. Vue中多个元素的过渡

    transition 标签 mode 属性:

    • in-out:多个元素切换的时候,先显示再隐藏
    • out-in:多个元素切换的时候,先隐藏再显示
    <template>
      <div class="wrap">
        <transition mode="out-in">
          <div v-if="show" key="hello">hello</div>
          <div v-else key="world">world</div>
        </transition>
        <button @click="handleClick">切换显隐</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          show: true,
        };
      },
      methods: {
        handleClick() {
          this.show = !this.show;
        },
      },
    };
    </script>
    <style scoped>
    .v-enter,.v-leave-to{
      opacity: 0;
    }
    .v-enter-active,.v-leave-active{
      transition: opacity 1s;
    }
    </style>
    

    二. Vue中多个组件的过渡

    父组件

    <template>
      <div class="wrap">
        <h2>Vue中多个元素或组件的过渡</h2>
        <transition mode="out-in">
          <component :is="type"></component>
        </transition>
        <button @click="handleClick">切换显隐</button>
      </div>
    </template>
    
    <script>
    //子组件地址仅供参考
    import One from "../child/ChildOne.vue";
    import Two from "../child/ChildTwo.vue";
    export default {
      components: {
        One,
        Two,
      },
      data() {
        return {
          type: 'One',
        };
      },
      methods: {
        handleClick() {
          this.type = this.type == "One" ? "Two" : "One";
        },
      },
    };
    </script>
    <style scoped>
    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-enter-active,
    .v-leave-active {
      transition: opacity 1s;
    }
    </style>
    

    第一个子组件

    <template>
      <div class="wrap">
          组件1
      </div>
    </template>
    <script>
    export default {
      data() {
        return {};
      },
    };
    </script>
    <style scoped>
    </style>
    

    第二个子组件

    <template>
      <div class="wrap">
          组件2
      </div>
    </template>
    <script>
    export default {
      data() {
        return {};
      },
    };
    </script>
    <style scoped>
    </style>
    
    展开全文
  • Vue中实现一个元素显示隐藏

    千次阅读 2020-06-22 13:39:14
    Vue中实现一个元素显示隐藏 实现如上图所示的效果,点击绿方框可以切换显示隐藏 废话不说我们直接上代码 <template> <view class="chapters"> <view class="chapter-contant-items">...

    Vue中实现一个元素的显示隐藏

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述


    实现如上图所示的效果,点击绿方框可以切换显示和隐藏

    废话不多说我们直接上代码


    <template>
    	<view class="chapters">
    		<view class="chapter-contant-items">
    			<view class="contant-title">
    				<text>第一季</text>
    				<image src="" mode="" @click="showDetaol(0)"></image>
    			</view>
    			<view class="contant-wrap" v-show='items[0]'>
    				<view class="contant-contant">
    					<image src="" mode="" v-if="false"></image>
    					<text>第一集 暴风雨之夜</text>
    				</view>
    				
    				<view class="contant-contant">
    					<image src="" mode="" v-if="true"></image>
    					<text>第二集 暴风雨暴风雨暴风雨暴风雨</text>
    				</view>
    			</view>
    		</view>
    		
    		<view class="chapter-contant-items">
    			<view class="contant-title">
    				<text>第二季</text>
    				<image src="" mode="" @click="showDetaol(1)"></image>
    			</view>
    			<view class="contant-wrap" v-show='items[1]'>
    				<view class="contant-contant">
    					<image src="" mode="" v-if="false"></image>
    					<text>第一集 猪八戒上高老庄</text>
    				</view>
    				
    				<view class="contant-contant">
    					<image src="" mode="" v-if="true"></image>
    					<text>第二集 我上高老庄娶媳妇了啊娶媳妇了啊</text>
    				</view>
    			</view>
    		</view>
    		
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				item:[{},{},{},{},{}],
    				items:[true,true],
    				show:false,
    			};
    		},
    		
    		methods:{
    			showDetaol(index) {
    				//let that = this
    				// for(let i =0;i< this.item.length;i++) {
    				// 	that.items[i] = false
    				// }
    				//this.items[index] = !this.items[index]
    				//this.show = !this.show
    				
    				//修正以后⬇️⬇️⬇️
    				let arr = this.items[index];
    				arr = !arr
    				this.items.splice(index,1,arr);
    				
    			}
    		}
    	}
    </script>
    
    <style lang="less" scoped>
    .chapters{
    	.chapter-banner{
    		width:686rpx;
    		height:379rpx;
    		margin:56rpx 32rpx;
    		image{
    			width:686rpx;
    			height:379rpx;
    			background-color:#3F536E;
    		}
    	}
    	.chapter-title{
    		width:686rpx;
    		font-size:r48px;
    		font-family:PingFangSC-Semibold,PingFang SC;
    		font-weight:600;
    		color:rgba(51,51,51,1);
    		margin: 0 32rpx 26rpx;
    	}
    	.chapter-time{
    		width:150rpx;
    		font-size:28rpx;
    		font-family:PingFangSC-Regular,PingFang SC;
    		font-weight:400;
    		color:rgba(155,155,155,1);
    		margin: 0 32rpx 56rpx;
    	}
    	.chapter-detail{
    		width:686rpx;
    		font-size:30rpx;
    		font-family:PingFangSC-Regular,PingFang SC;
    		font-weight:400;
    		color:rgba(51,51,51,1);
    		margin: 0 32rpx 56rpx;
    	}
    	.chapter-contant-items{
    		.contant-title{
    			display:flex;
    			justify-content:space-between;
    			align-items: center;
    			margin:30rpx 32rpx;
    			text {
    				font-family: PingFangSC-Semibold;
    				font-size: 36rpx;
    				font-weight: normal;
    				font-stretch: normal;
    				letter-spacing: 0rpx;
    				color: #333333;
    			}
    			image {
    				width: 50rpx;
    				height: 50rpx;
    				background-color: #4CD964;
    			}
    		}
    		.contant-wrap {
    			background-color:#EAEAEA;
    			.contant-contant{
    				display:flex;
    				justify-content:flex-start;
    				align-items: flex-start;
    				padding: 15rpx 0;
    				margin: 0 45rpx;
    				box-sizing:content-box;
    				padding-left:10rpx;
    				&:not(:first-child){
    					border-top:solid 1rpx #eeeeee;
    				}
    				text {
    					font-family: PingFangSC-Semibold;
    					font-size: 36rpx;
    					font-weight: normal;
    					font-stretch: normal;
    					letter-spacing: 0rpx;
    					color: #333;
    				}
    				image {
    					width: 50rpx;
    					height: 50rpx;
    					background-color: #4CD964;
    					align-self: flex-start;
    					margin-right: 10rpx;
    					margin-right:15rpx;
    				}
    			}
    		}
    		
    	}
    }
    </style>
    
    

    实际场景:数据是后台对接接口之后取出来的,每一季相当于每一个item,给每一个item里面要切换的元素绑定一个v-show,v-show里面的Boolean值肯定是要动态变化的,items数组是用来存放个数与item(item是主要数据)即有几个item我们就存几个boolean值进去items中,这里在页面onShow的时候我们可以根据遍历item个数动态填充进去,相当于给每一个item都配备了一个专属于他们自己的boolean值进去互不影响--------(end)


    观察代码的时候你会发现只不过是简单的v-show切换而已(没什么大不了),记录这一篇文章还是因为过程中遇到了一些小坑…

    这里就涉及到一个点,在我第一版代码里面,boolean值点击的时候是在变化的,但是却没有更新到视图上面来,
    这是为什么呢?答案就在Vue官方文档里啦!【数组更新检测】
    

    数组更新检测传送门
    那么就到这!如对你们有帮助就很nice!!!愿你们前程似锦!!有什么问题或者纰漏或者有更好的实现方式欢迎交流!!相互学习

    展开全文
  • Vue for循环列表控制显示隐藏

    千次阅读 2019-07-12 18:38:55
    点击每一列,可以展开效果 实现原理: 方法一: <ul id="app"> <li v-for='item in items' @click="toggle(item)"> <span v-if='item.show'>{{item.content}}<...new Vue({ e...
  • vue 多个列表显示隐藏

    千次阅读 2018-09-05 10:43:18
    1.给循环的数组添加一hide属性 2.取反this.All[index].hide=!this.All[index].hide;使得值变为true,  
  • <div @click.stop="basic()" style="width: 100px;height: 100px;...控制元素 </div> <div class="person" v-if="sign" style="width: 100px;height: 100px;background-color: red;"&.
  • vue元素显示隐藏 v-if 和 v-show 指令

    千次阅读 2020-12-16 09:17:13
    vue中,v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示隐藏的效果。 语法: <标签 v-if="true/false"></标签> <标签 v-show="true/false"></标签> <!--true:...
  • 1. 效果如下 2. 功能描述 点击“添加筛选规则” 就... ...当全部被选择后 会 隐藏 “添加筛选规则” 3. 主要的功能代码 <template> <div> <div class="sidebar-add"> <header>...
  • 一个boolean类型的变量showFlag控制多个元素(以ts举例) 点击一个按钮切换按钮背景或颜色,可以这样写 还可以用这个showFlag控制其他元素显示隐藏 还可以用这个showFlag控制其他元素的宽度或高度也随着布尔值...
  • Vue多个元素的过渡与单个元素的过渡类似: 多个元素的过渡: <style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style...
  • 多个元素的过渡 &lt;style&gt;  .v-enter,.v-leave-to{  opacity: 0;  }  .v-enter-acitve,.v-leave-active{  opacity: opacity 1s;  } &lt;/style&gt; &lt;div id='app'&gt;  &...
  • 多个元素的过渡动画 此时,点击按钮进行切换时并不会有过渡动画,因为Vue会尽量复用DOM元素 添加key值可以解决这个问题   设置mode=“in-out”可以使要显示的元素先显示,要隐藏的元素后隐藏,out-in相反 ...
  • 因群里有小伙伴问到了一场景,有很视图需要控制显示隐藏(视图可以同时显示),常规的做法就是每视图都使用一变量去控制,但是这样的话又会对应到每控制变量切换的methods,这样做会让代码变得很臃肿且...
  • 一、Vue多个元素的过渡 关键点如下: 为每个元素添加 key 属性,避免Vue的复用导致不出现动画 为 <transition> 添加 mode 属性: 3. in-out:先出现元素,再隐藏元素 4. out-in:先隐藏元素,再出现元素 &...
  • Vue子组件的显示隐藏

    千次阅读 2020-07-30 00:18:15
    在使用Vue开发前端页面的过程中,经常都会遇到需要在父组件中控制子组件的显示/隐藏,比如弹出窗口。最简单的方法就是:通过父子组件间的数据双向绑定来实现。这种方法虽然简单,但只是针对于父与子组件这种关系来...
  • Vue多个元素或组件的过渡动画 实现多个元素的过渡动画的效果 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...
  • 如果transition标签里有多个元素做动画,比如做个toggle切换的效果。 &amp;lt;transition name='fade' mode='in-out'&amp;gt; &amp;lt;div v-if=&quot;cssanimate&quot; key='hello'&...
  • vue实现 toggle显示隐藏效果

    千次阅读 2019-03-29 13:01:22
    背景介绍 ...2.控制页面中多个dom元素 3.控制页面中的dom元素是从服务端返回,且有多个 技术分析 1.一二场景下实现这种效果可以用v-if指令,通过设置true或false来控制dom的隐藏显示。如果控...
  • 功能讲解 网上看到很帖子都是答非所问,或者给的解决办法只有一半,根本...html部分:这里注意一是按钮,一显示页面,我们之所以可以点击之外的区域可以隐藏,是在外面包了一div,div上写的v-cloak v-clickou
  • 多个元素之间过渡动画效果 多元素之间如何实现过渡动画效果呢?看下面代码 .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } <div id="root...
  • 由于是vue项目,对于swiper的轮播图我们使用了v-show命令,进行动态隐藏显示。只有当点击进行一些操作以后,swiper的轮播图才会显示出来。但是,在使用v-show命令以后,swiper的轮播图显示和分页不正常,样式出现...
  • Vue多个元素展开收起

    2018-10-10 14:38:00
    //右侧图标根据内容隐藏显示进行相应显示 }, toDetail(item) { this .$router.push('/helpDetails/' + item) }, },   转载于:https://www.cnblogs.com/yuanxinru321/p/9766223.html
  • 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 v-show控制轮播盒子不同渲染,但是会出现第一次点击,轮播插件显示出现错误,具体表现为轮播子元素只剩下一,且为缩小状态,需要次切换显示轮播才能正常显示 解决: this.$nextick() 1.注意两...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,433
精华内容 6,173
关键字:

vue控制多个元素显示隐藏

vue 订阅