<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
ul{
width: 100%;
height: 50px;
line-height: 50px;
overflow: visible; }
.active{
overflow: hidden;
}
li {
float: left;
width:100px;
color: #f1f1f1;
font-size: 18px;
background-color: green;
margin-left: 50px;
padding-left: 20px;
margin-top: 10px;
list-style: none; }
span{
display: inline-block;
margin-left: 10px;
font-size: 18px;
color: #ccc;
line-height: 30px; }
</style> <body>
<div id="app">
<ul :class="{active:flag}">
<li v-for="todo in todos">{{todo.text}} </li>
<p v-if ="todos.length>6" @click = "showTag"><span>{{flag?"展开":"收起"}}</span></p>
</ul> </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
todos:[{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'}],
flag:true
},
methods:{
showTag(){
this.flag = !this.flag
}
}
})
</script>
</html>
点击展开之后：主要用到的属性有ovflow属性，以及vue的动态绑定class
注：如果是自适应的就要读取浏览器的宽度了，6就要换成浏览器的宽度了，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
ul{
width: 100%;
height: 50px;
line-height: 50px;
overflow: visible; }
.active{
overflow: hidden;
}
li {
float: left;
width:100px;
color: #f1f1f1;
font-size: 18px;
background-color: green;
margin-left: 50px;
padding-left: 20px;
margin-top: 10px;
list-style: none; }
span{
display: inline-block;
margin-left: 10px;
font-size: 18px;
color: #ccc;
line-height: 30px; }
</style> <body>
<div id="app">
<ul :class="{active:flag}">
<li v-for="todo in todos">{{todo.text}} </li>
<p v-if ="todos.length>6" @click = "showTag"><span>{{flag?"展开":"收起"}}</span></p>
</ul> </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
todos:[{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'}],
flag:true,
screenWidth:window.innerWidth
},
methods:{
showTag(){
this.flag = !this.flag
}
},
mounted(){
let that = this;
window.onresize=()=>{
return (()=>{
window.screenWidth = window.innerWidth;
this.screenWidth = window.screenWidth;
})()
}
},
watch:{
screenHeight(val){
this.screenWidth = val }
} })
</script>
</html>
