vue实现1-4-9宫格切换
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5f99092192dc49c763fb42e9aa692ff8.gif)
<!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;