<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue基础之计算器</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<!-- 案例一计算器部分 -->
<!-- <div class="jisuanqi">
<h1>简答计算器</h1>
<div>
<span >数值A:</span>
<input type="text" v-model='a'>
</div>
<div>
<span >数值B:</span>
<input type="text" v-model='b'>
</div>
<div class="fangshi">
<span>请选择运算方式</span>
<button @click="panduan">+</button>
<button @click="panduan">-</button>
<button @click = 'panduan'>*</button>
<button @click = 'panduan'>/</button>
</div>
<button v-on:click="jisuan">计算</button>
<div>计算结果
<span v-html="result"></span>
</div>
</div> -->
<!-- 计算器js部分 -->
<!-- <script>
var vue = new Vue({
el:".jisuanqi",
data:{
a:'',
b:'',
result:'',
yunsuan:''
},
methods:{
jisuan:function(){
if(this.yunsuan == '+'){
this.result = parseFloat(this.a) + parseFloat(this.b)
}else if (this.yunsuan == '-'){
this.result = parseFloat(this.a) - parseFloat(this.b)
}else if (this.yunsuan == '*'){
this.result = parseFloat(this.a) * parseFloat(this.b)
}else if (this.yunsuan == '/'){
this.result = parseFloat(this.a) / parseFloat(this.b)
}
},
panduan(v){
this.yunsuan = v.target.innerHTML
}
}
})
</script> -->
<!-- 案例二 选项卡功能 -->
<!-- <style>
* {
padding: 0;
margin: 0;
}
.clear:after,
.clear:before{
content: "";
display: block;
height: 0;
clear:both
}
.clear {
*zoom:1
}
li {
list-style: none;
float: left;
text-align: center;
padding: 40px 100px;
border: 1px solid pink;
}
img {
width: 702px;
height: 400px;
}
.bottom div {
display: none;
}
.bottom .current_img{
display: block;
}
.current {
background-color: orange;
}
</style>
<div class="xuanxiangka">
<div class="top">
<ul class="clear">
<li @click='change(index)' :key="item.id" :class="current_index==index?'current':''" v-for="(item,index) in shuju">{{item.title}}</li>
</ul>
</div>
<div class="bottom">
<div :key="item.id" v-for="(item,index) in shuju" :class="current_index==index?'current_img':''">
<img :src="item.img" alt="">
</div>
</div>
</div> -->
<!-- js部分 -->
<!-- <script>
var vue = new Vue({
el:'.xuanxiangka',
data:{
//要拿到当前点击选项卡的索引号进行判断
current_index:0,
shuju:[{
id:0,
title:"苹果",
img:"img/apple.jpg"
},{
id:1,
title:"橘子",
img:"img/orange.jpg"
},{
id:2,
title:"香蕉",
img:"img/banner.jpg"
}]
},
methods:{
change:function(index){
//通过改变current_index变量来控制类名的变化 记住访问data里数据或者变量的时候一定要使用this
this.current_index = index
}
}
})
</script> -->
<!-- 案例三 图书管理案例功能 -->
<!-- 图书样式部分 -->
<style>
h1 {
text-align: center;
}
.tushu {
width: 500px;
margin: 0 auto;
}
table {
width: 500px;
}
th,
tr,
td {
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #999;
border-right: none;
border-top: none;
}
.top {
background-color: #ccc;
line-height: 40px;
text-align: center;
}
</style>
<div class="tushu">
<h1>图书管理</h1>
<div class="top">
<span>编号</span>
<input type="text" v-model='one' :disabled='dis'>
<span>名称</span>
<input type="text" v-model='two'>
<button @click='tijiao'>提交</button>
</div>
<div class="center">
<table>
<tr class="top">
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
<tr :key='item.id' v-for="item in shuju">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date | guolv('yyyy-MM-dd HH-mm-ss')}}</td>
<td>
<!-- @click.prevent点击阻止默认行为 -->
<a href="" @click.prevent='xiugai(item.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent='del(item.id)'>删除</a>
</td>
</tr>
</table>
</div>
</div>
<!-- js部分 -->
<script>
var newdater = new Date();
Vue.filter('guolv', function(val, canshu) {
if (canshu == 'yyyy-MM-dd HH-mm-ss') {
var o = {
y: val.getFullYear(),
m: val.getMonth() + 1,
d: val.getDate(),
h: val.getHours(),
mi: val.getMinutes(),
s: val.getSeconds()
}
return o.y + '-' + o.m + '-' + o.d + " " + o.h + '时' + o.mi + '分' + o.s + '秒'
}
})
var vue = new Vue({
el: '.tushu',
data: {
one: '',
two: '',
dis: false,
zhta: true,
shuju: [{
id: 1,
name: '西游记',
date: newdater
}, {
id: 2,
name: '红楼梦',
date: newdater
}, {
id: 3,
name: '三国演义',
date: newdater
}, {
id: 4,
name: '水浒传',
date: newdater
}]
},
methods: {
//当点击提交的时候 通过编号是否能修改信息判断是新增还是修改
tijiao: function() {
//修改提交 循环数组 拿到id号 跟编号做对比
if (this.dis) {
this.shuju.forEach(element => {
if (element.id == this.one) {
element.name = this.two
return true
}
});
} else {
//新增数据追加数组
var arr = []
arr.id = this.one
arr.name = this.two
arr.date = newdater
this.idrepeat(arr.id, this.shuju)
console.log(this.zhta)
if (this.zhta == true) {
this.shuju.push(arr)
}
}
this.one = ''
this.two = ''
this.dis = false
this.zhta = true
},
xiugai: function(id) {
// 当点击修改的时候遍历数组 把内容展示在输入框中
for (item in this.shuju) {
// 代表的是当前点击的id 形参的id代表的是点击当前的编号
// console.log(this.shuju[item].id);
if (this.shuju[item].id == id) {
this.one = this.shuju[item].id
this.two = this.shuju[item].name
}
// 编号置灰不可更改
this.dis = true
}
},
del: function(id) {
// 当点击删除的时候查找一下当前id 然后使用splice删掉
// console.log(id);
var index = this.shuju.findIndex(function(item) {
if (item.id == id) {
return item
}
})
this.shuju.splice(index, 1)
},
//点击提交的时候需要判断是不是有id重复的
idrepeat(xin, jiu) {
let _this = this
jiu.forEach(function(item, index) {
if (item.id == xin) {
alert('有相同的id信息，请重新输入')
_this.zhta = false
}
console.log(_this.zhta)
})
}
}
})
</script>
</body>
</html>
