标签：play title 显示 div 代码 -- idt color lock
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #card{ width: 500px; height: 350px; } .title{ height:50px; } .title span{ width: 100px; height: 50px; background-color:#ccc; display: inline-block; line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */ text-align:center; } .content .list{ width: 500px; height: 300px; background-color: yellow; display: none; } .content .active{ display: block; } .title .current{ background-color: yellow; } </style> <script src="vue.js"></script> </head> <body> <div id="card"> <div class="title"> <span @click="num=1" :class="{current:num===1}">国内新闻</span> <span @click="num=2" :class="{current:num===2}">国际新闻</span> <span @click="num=3" :class="{current:num===3}">银河新闻</span> <!--<span>{{num}}</span>--> </div> <div class="content"> <div class="list" :class="{active:num===1}">国内新闻列表</div> <div class="list" :class="{active:num===2}">国际新闻列表</div> <div class="list" :class="{active:num===3}">银河新闻列表</div> </div> </div> <script> // 思路： // 当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list] // 代码实现： var card = new Vue({ el:"#card", data:{ num:0, }, }); </script> </body> </html>
页面效果:
标签：play title 显示 div 代码 -- idt color lock
原文地址：https://www.cnblogs.com/xo1990/p/14646046.html
