使用Vue渲染swiper模板,按鈕點選設定渲染內容
阿新 • • 發佈：2019-02-01
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Title</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="btn()">全部</button> <button @click="btn1()">第一組</button> <button @click="btn2()">第二組</button> <button @click="btn3()">第三組</button> <div v-for="item in Arrays" :id="item.type" :class="cls"> <h1>{{item.title}}</h1> <img :src="item.srcs" alt=""> </div> </div> <script> var app = new Vue({ el:"#app", data:{ cls:'bt', //插值陣列 Arrays:[ { title:"第一組", type:'1', srcs:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534688762840&di=77808492e0f983d6a5fa15696b18c346&imgtype=0&src=http%3A%2F%2Fimg9.zol.com.cn%2Fdesk%2F800_440%2F439091.jpg', }, { title:"第二組", type:'2', srcs:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534688762840&di=cdea47c1fc3dcbae33892dda1c46c5a2&imgtype=0&src=http%3A%2F%2Fk.zol-img.com.cn%2Fnbbbs%2F8360%2Fa8359626_s.jpg' }, { title:"第三組", type:'3', srcs:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534688762840&di=9042c4ce944e2832db1b96e4df53be89&imgtype=0&src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F7676%2F7675079_0800.jpg' } ] }, methods:{ // 顯示全部按鈕點選呼叫該方法 btn:function() { var ds = document.getElementsByClassName("bt"); //使用 for in迴圈遍歷所有的組 for (var i in ds){ ds[i].style.display="block"; } }, // 顯示第一組按鈕點選呼叫該方法 btn1:function() { document.getElementById("1").style.display="none";}, // 顯示第二組按鈕點選呼叫該方法 btn2:function() { document.getElementById("2").style.display="none";}, // 顯示第三組按鈕點選呼叫該方法 btn3:function() { document.getElementById("3").style.display="none";} } }) </script> </body> </html>