<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>vue基礎(chǔ)之計(jì)算器</title>
????<script?src="js/vue.min.js"></script>
</head>
<body>
????<!--?案例一計(jì)算器部分?-->
????<!--?<div?class="jisuanqi">
????????<h1>簡(jiǎn)答計(jì)算器</h1>
????????<div>
????????????<span?>數(shù)值A(chǔ):</span>
????????????<input?type="text"?v-model='a'>
????????</div>
????????<div>
????????????<span?>數(shù)值B:</span>
????????????<input?type="text"?v-model='b'>
????????</div>
????????<div?class="fangshi">
????????????<span>請(qǐng)選擇運(yùn)算方式</span>
????????????<button?@click="panduan">+</button>
????????????<button?@click="panduan">-</button>
????????????<button?@click?=?'panduan'>*</button>
????????????<button?@click?=?'panduan'>/</button>
????????</div>
????????<button?v-on:click="jisuan">計(jì)算</button>
????????<div>計(jì)算結(jié)果
????????????<span?v-html="result"></span>
????????</div>
????</div>?-->
????<!--?計(jì)算器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>?-->
????<!--?案例二?選項(xiàng)卡功能?-->
????<!--?<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:{
????????????//要拿到當(dāng)前點(diǎn)擊選項(xiàng)卡的索引號(hào)進(jìn)行判斷
????????????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里數(shù)據(jù)或者變量的時(shí)候一定要使用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>編號(hào)</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>編號(hào)</th>
????????????????????<th>名稱</th>
????????????????????<th>時(shí)間</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點(diǎn)擊阻止默認(rèn)行為?-->
????????????????????????<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?+?'時(shí)'?+?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:?'紅樓夢(mèng)',
????????????????????date:?newdater
????????????????},?{
????????????????????id:?3,
????????????????????name:?'三國(guó)演義',
????????????????????date:?newdater
????????????????},?{
????????????????????id:?4,
????????????????????name:?'水滸傳',
????????????????????date:?newdater
????????????????}]
????????????},
????????????methods:?{
????????????????//當(dāng)點(diǎn)擊提交的時(shí)候?通過編號(hào)是否能修改信息判斷是新增還是修改
????????????????tijiao:?function()?{
????????????????????//修改提交?循環(huán)數(shù)組?拿到id號(hào)?跟編號(hào)做對(duì)比
????????????????????if?(this.dis)?{
????????????????????????this.shuju.forEach(element?=>?{
????????????????????????????if?(element.id?==?this.one)?{
????????????????????????????????element.name?=?this.two
????????????????????????????????return?true
????????????????????????????}
????????????????????????});
????????????????????}?else?{
????????????????????????//新增數(shù)據(jù)追加數(shù)組
????????????????????????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)?{
????????????????????//?當(dāng)點(diǎn)擊修改的時(shí)候遍歷數(shù)組?把內(nèi)容展示在輸入框中
????????????????????for?(item?in?this.shuju)?{
????????????????????????//?代表的是當(dāng)前點(diǎn)擊的id?形參的id代表的是點(diǎn)擊當(dāng)前的編號(hào)
????????????????????????//?console.log(this.shuju[item].id);
????????????????????????if?(this.shuju[item].id?==?id)?{
????????????????????????????this.one?=?this.shuju[item].id
????????????????????????????this.two?=?this.shuju[item].name
????????????????????????}
????????????????????????//?編號(hào)置灰不可更改
????????????????????????this.dis?=?true
????????????????????}
????????????????},
????????????????del:?function(id)?{
????????????????????//?當(dāng)點(diǎn)擊刪除的時(shí)候查找一下當(dāng)前id?然后使用splice刪掉
????????????????????//?console.log(id);
????????????????????var?index?=?this.shuju.findIndex(function(item)?{
????????????????????????if?(item.id?==?id)?{
????????????????????????????return?item
????????????????????????}
????????????????????})
????????????????????this.shuju.splice(index,?1)
????????????????},
????????????????//點(diǎn)擊提交的時(shí)候需要判斷是不是有id重復(fù)的
????????????????idrepeat(xin,?jiu)?{
????????????????????let?_this?=?this
????????????????????jiu.forEach(function(item,?index)?{
????????????????????????if?(item.id?==?xin)?{
????????????????????????????alert('有相同的id信息焙蚓，請(qǐng)重新輸入')
????????????????????????????_this.zhta?=?false
????????????????????????}
????????????????????????console.log(_this.zhta)
????????????????????})
????????????????}
????????????}
????????})
????</script>
</body>
</html>
