1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 5 <title>Document</title> 6 6 </head> 7 7 <style type="text/css"> 8 8 ul{ 9 9 width: 100%; 1010 height: 50px; 1111 line-height: 50px; 1212 overflow: visible; 1313 1414 } 1515 .active{ 1616 overflow: hidden; 1717 } 1818 li { 1919 float: left; 2020 width:100px; 2121 color: #f1f1f1; 2222 font-size: 18px; 2323 background-color: green; 2424 margin-left: 50px; 2525 padding-left: 20px; 2626 margin-top: 10px; 2727 list-style: none; 2828 2929 } 3030 span{ 3131 display: inline-block; 3232 margin-left: 10px; 3333 font-size: 18px; 3434 color: #ccc; 3535 line-height: 30px; 3636 3737 } 3838 </style> 3939 4040 <body> 4141 <div id="app"> 4242 <ul :class="{active:flag}"> 4343 <li v-for="todo in todos">{{todo.text}} 4444 4545 </li> 4646 <p v-if ="todos.length>6" @click = "showTag"><span>{{flag?"展开":"收起"}}</span></p> 4747 </ul> 4848 4949 </div> 5050 </body> 5151 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 5252 <script type="text/javascript"> 5353 var app = new Vue({ 5454 el: '#app', 5555 data: { 5656 todos:[{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'}], 5757 flag:true 5858 }, 5959 methods:{ 6060 showTag(){ 6161 this.flag = !this.flag 6262 } 6363 } 6464 }) 6565 </script> 6666 </html>
点击展开之后：主要用到的属性有ovflow属性，以及vue的动态绑定class
注：如果是自适应的就要读取浏览器的宽度了，6就要换成浏览器的宽度了，代码如下：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<style type="text/css"> 8ul{ 9 width: 100%; 10 height: 50px; 11 line-height: 50px; 12 overflow: visible; 13 14} 15.active{ 16overflow: hidden; 17} 18li { 19 float: left; 20 width:100px; 21 color: #f1f1f1; 22 font-size: 18px; 23 background-color: green; 24 margin-left: 50px; 25 padding-left: 20px; 26 margin-top: 10px; 27 list-style: none; 28 29} 30span{ 31 display: inline-block; 32 margin-left: 10px; 33 font-size: 18px; 34 color: #ccc; 35 line-height: 30px; 36 37} 38</style> 39 40<body> 41 <div id="app"> 42 <ul :class="{active:flag}"> 43 <li v-for="todo in todos">{{todo.text}} 44 45 </li> 46 <p v-if ="todos.length>6" @click = "showTag"><span>{{flag?"展开":"收起"}}</span></p> 47 </ul> 48 49 </div> 50</body> 51<script src="https://cdn.jsdelivr.net/npm/vue"></script> 52<script type="text/javascript"> 53var app = new Vue({ 54 el: '#app', 55 data: { 56 todos:[{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'}], 57 flag:true, 58 screenWidth:window.innerWidth 59 }, 60 methods:{ 61 showTag(){ 62 this.flag = !this.flag 63 } 64 }, 65 mounted(){ 66 let that = this; 67 window.onresize=()=>{ 68 return (()=>{ 69 window.screenWidth = window.innerWidth; 70 this.screenWidth = window.screenWidth; 71 })() 72 } 73 }, 74 watch:{ 75 screenHeight(val){ 76 this.screenWidth = val 77 78 } 79 } 80 81}) 82</script> 83</html>
