vue实现1-4-9宫格切换

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>将页面平均分成四部分</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/vue/2.5.18-beta.0/vue.js"></script><style type="text/css">div{object-fit: initial;}* {margin: 0;padding: 0;}.main {width: 100%;height: 100%;position: absolute;}.main2 {width: 100%;height: 95%;position: absolute;}.quarter-div9 {width: 33.33%;height: 33.33%;float: left;}.quarter-div4 {width: 50%;height: 50%;float: left;}.quarter-div {width: 100%;height: 100%;}.blue {background-color: #5BC0DE;}.green {background-color: #5CB85C;}.orange {background-color: #F0AD4E;}.yellow {background-color: #FFC706;}.red {background-color: #FF0000;}</style></head><body ><div id="app"><input type="radio" value=1 v-model="isActive"/><input type="radio" value=4 v-model="isActive"/><input type="radio" value=9 v-model="isActive"/><h1>{{isActive}}</h1><div class="main2" ><div v-bind:class="[isActive == 1 ? 'quarter-div': '',isActive == 4 ? 'quarter-div4': '',isActive == 9 ? 'quarter-div9': '', 'yellow']"><h1>1</h1></div><div v-show="isActive != 1" v-bind:class="[isActive == 4 ? 'quarter-div4': '',isActive == 9 ? 'quarter-div9': '', 'red']"><h1>2</h1></div><div v-show="isActive != 1" v-bind:class="[isActive == 4 ? 'quarter-div4': '',isActive == 9 ? 'quarter-div9': '', 'blue']"><h1>3</h1></div><div v-show="isActive != 1" v-bind:class="[isActive == 4 ? 'quarter-div4': '',isActive == 9 ? 'quarter-div9': '', 'green']"><h1>4</h1></div><div v-show="isActive == 9" v-bind:class="[isActive == 9 ? 'quarter-div9': '', 'blue']"><h1>5</h1></div><div v-show="isActive == 9" v-bind:class="[isActive == 9 ? 'quarter-div9': '', 'orange']"><h1>6</h1></div><div v-show="isActive == 9" v-bind:class="[isActive == 9 ? 'quarter-div9': '', 'yellow']"><h1>7</h1></div><div v-show="isActive == 9" v-bind:class="[isActive == 9 ? 'quarter-div9': '', 'green']"><h1>8</h1></div><div v-show="isActive == 9" v-bind:class="[isActive == 9 ? 'quarter-div9': '', 'yellow']"><h1>9</h1></div></div></div></body><script type="text/javascript">new Vue({el: '#app',data: {isActive : 1}})</script>
</html>

vue实现1-4-9宫格切换相关推荐

用H5实现四宫格切换九宫格,再切换十六宫格
废话不多说,直接上代码效果图如下点击右上角按钮,即可切换4宫格,9宫格,16宫格 html部分 <div class="center" ...
Android宫格动态列,Android实现宫格图片连续滑动效果
本文给大家介绍如何在Android中实现宫格图片连续滑动效果. 在这之前,写过几篇关于在Android中实现滑动的效果,毕竟滑动效果在Andriod开发中也使用得比较频繁,有兴趣的朋友请查看我以前的文 ...
android9 关闭点击动画,在Android app中实现九(n)宫格图片连续滑动效果
今天写这篇文章的缘由是前一段时间一个网友在我的博客上面留言,想要实现在GridLayout(相当于九宫格)中点击每项可左右滑动显示该宫格的图片,当该宫格的图片显示完以后,接着显示下一宫格的图片.那么看 ...
Android宫格动态列,在Android app中实现九(n)宫格图片连续滑动效果
今天写这篇文章的缘由是前一段时间一个网友在我的博客上面留言,想要实现在GridLayout(相当于九宫格)中点击每项可左右滑动显示该宫格的图片,当该宫格的图片显示完以后,接着显示下一宫格的图片.那么看 ...
vue 图片宫格_vue 如何拿到后台传回的富文本中的img，进行9宫格排列展示以及相关处理...
描述: res.data.list 返回的数组, 数组中的每个对象有一个 content,就是传回来的富文本的内容,要拿到这里面的所有的img,进行9宫格排列处理: 1.let img = this. ...
JQuery实现移动9宫格图片自由切换移动
这篇文章主要介绍了通过JQuery实现移动9宫格的前端页面特效,用户可以自由选择1张图片,并移动此图片,松开鼠标后,会自动交换2张图片的位置. 实现方法:html和css在页面上静态地实现9宫格,用9 ...
vue 1 2 3 4 6 9 16宫格 6宫格（六宫格） 9宫格（九宫格） 16宫格（十六宫格）自定义宫格(样式篇)
直接上图把,如果是你的菜,就点个赞,谢谢. 目录: 我直接在app.vue组件写了.. <template><div class="cell"><di ...
vue实现视频播放1，4，6，9，16宫格布局
先上图创建播放器 HwCellPlayer.vue <template><div class="player">player{{ title }}< ...
Vue实现3*3九宫格抽奖（并拓展实现n*n多宫格抽奖）
九宫格抽奖,包括幸运大转盘,已经在不管是电商还是日常网页中已经算是比较常见的页面效果了(此处点名批评pdd),那么如何用Vue来实现九宫格以及后续的十二宫格,十六宫格等多宫格抽奖组件呢? 先上效果图: ...

vue实现1-4-9宫格切换

vue实现1-4-9宫格切换

vue实现1-4-9宫格切换相关推荐

最新文章

热门文章