vue 案例
Tab选项卡案例
选择对应tab标签,切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.tab ul {
overflow: hidden;
padding: 0;
margin: 0;
}
.tab ul li {
box-sizing: border-box;
padding: 0;
float: left;
width: 100px;
height: 45px;
line-height: 45px;
list-style: none;
text-align: center;
border-top: 1px solid blue;
border-right: 1px solid blue;
cursor: pointer;
}
.tab ul li:first-child {
border-left: 1px solid blue;
}
.tab ul li.active {
background-color: orange;
}
.tab div {
width: 500px;
height: 300px;
display: none;
text-align: center;
font-size: 30px;
line-height: 300px;
border: 1px solid blue;
border-top: 0px;
}
.tab div.current {
display: block;
}
</style>
</head>
<body>
<div id="app">
<div class="tab">
<ul>
<li v-on:click='change(index)' :class='currentIndex==index?"active":""':key="item.index" v-for="(item,index) in list">{{item.title}}</li>
</ul>
<div :class='currentIndex==index?"current":""' :key="item.index" v-for="(item,index) in list">
<img :src="item.path" style="width: 200px;height: 150px;">
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
currentIndex:0,//当前索引
list:[
{id:0,title:'mango',path:'./images/mango.jpg'},
{id:1,title:'pineapp',path:'./images/pineapp.jpg'},
{id:2,title:'strawberry',path:'./images/strawberry.jpg'}
]
},
methods: {
change:function(index){
//在这里实现选项卡切换操作:本质就是操作类名
//通过currtentIndex操作类名
this.currentIndex=index;
}
},
});
</script>
</html>
图书管理案例
实现功能:添加图书,删除图书,编辑(点击编辑,图书信息会自动填充到提交栏),实时显示图书总数,时间格式过滤器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.grid {
margin: auto;
width: 500px;
text-align: center;
}
.grid table {
width: 100%;
/* collapse:边框合并为单一的边框
separate:边框不合并,不会忽略 border-spacing 和 empty-cells 属性
*/
border-collapse: collapse;
}
.grid th,
td {
padding: 10px;
border: 1px dashed orange;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: orange;
}
.grid .book {
padding-bottom: 10px;
padding-top: 5px;
background-color: #F3DCAB;
}
.grid .total {
height: 30px;
line-height: 30px;
background-color: #F3DCAB;
border-top: 1px solid;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for="id">编号</label>
<input type="text" id="id" v-model="id" :disabled="flag" v-focus>
<label for="name">名称</label>
<input type="text" id="name" v-model="name">
<button @click="handle" :disabled="submitFlag">提交</button>
</div>
</div>
</div>
</div>
<div class="total">
<span>图书总数:</span>
<span>{{total}}</span>
</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key="item.id" v-for="(item,index) in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time|dateFormat("yyyy-mm-dd hh:mm:ss")}}</td>
<td>
<a href="" @click.prevent="toEdit(item.id)">编辑</a>
<span>|</span>
<a href="" @click.prevent="deleteBook(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
Vue.directive('focus', {
//el参数,是一个原生的JS对象
inserted: function (el) {//在插入DOM时会执行一次
el.focus()
//Js行为相关的都在inserted中设置
}
})
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
flag: false,//标记图书id是否可编辑
submitFlag:false,
list: [
{ id: 1, name: '西游记', time: 2525609975000 },
{ id: 2, name: '红楼梦', time: 2525609975000 },
{ id: 3, name: '水浒传', time: 2525609975000 },
{ id: 4, name: '三国演义', time: 2525609975000 }
]
},
methods: {
handle: function () {
if (this.flag) {
//编辑,根据图书id查询图书,并修改
var book = this.list.some((item) => {
if (item.id == this.id) {
//更新图书信息
item.name = this.name;
return true;
}
});
this.flag = false;
} else {
//提交
var book = {};
book.id = this.id;
book.name = this.name;
var day = new Date();
book.time = parseInt(new Date().getTime());
console.log(book.time);
//向数组中添加新增图书
this.list.push(book);
}
//清空输入栏
this.id = '';
this.name = '';
},
toEdit: function (id) {
//标记图书id不可被编辑
this.flag = true;
//根据id,查询list数组中的对应图书,返回一个新的数组
var books = this.list.filter(function (item) {
return item.id == id;
});
//把查询的图书信息添加到添加栏中
this.id = books[0].id;
this.name = books[0].name;
},
deleteBook: function (id) {
//删除图书
//根据图书id查询该图书在数组中的索引
var index = this.list.findIndex(function (item) {
return item.id == id;
});
//根据索引删除元素
//方法一
//this.list.splice(index,1);
//方法二
this.list = this.list.filter(function (item) {
return item.id != id;
});
}
},
computed: {
total: function () {
return this.list.length;
}
},
filters: {//私有过滤器
dateFormat: function (dateStr, pattern = '') {
//根据给定的时间字符串,得到特定的时间
var dt = new Date(dateStr);
//提取年月日
var y = dt.getFullYear();
var m = dt.getMonth() + 1;//月份从0开始
var d = dt.getDate();
if (pattern.toLocaleLowerCase() == 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
//最全时间格式
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
},
watch:{
name:function(val){
var flag=this.list.some(function(item){
return item.name==val;
});
if(flag){
this.submitFlag=true;
}else{
this.submitFlag=false;
}
}
}
})
</script>
</body>
</html>