vue 点击展开显示更多 点击收起部分隐藏 

 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">
 8 ul{
 9     width: 100%;
10     height: 50px;
11     line-height: 50px;
12     overflow: visible;
13     
14 }
15 .active{
16 overflow: hidden;
17 }
18 li {
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 }
30 span{
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">
53 var app = new Vue({
54   el: '#app',
55   data: {
56      todos:[{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'},{text:'生产标签'}],
57      flag:true
58   },
59   methods:{
60       showTag(){
61           this.flag = !this.flag
62       }
63   }
64 })
65 </script>
66 </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>

 

 

posted @ 2019-01-03 16:56  realman?  阅读(9920)  评论(0)    收藏  举报