77.Vue 02——授業後の練習
49854 ワード
1. todolist ， todolist
， "blue"
， "orange"
2. vue.js [ ， 、 ， ， ， ]
id
： v-for ， vm data
todolist
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolisttitle>
<script src="../day04/vue.js">script>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
style>
head>
<body>
<div id="todolist" class="list_con">
<h2>To do listh2>
<input type="text" v-model="message" class="inputtxt">
<input type="button" @click="addItem" value=" " class="inputbtn">
<ul id="list" class="list">
<li :bgcolor="key%2==0?'blue':'orange'" v-for="(item,key) in dolist" >
<span >{{item}}span>
<a @click="upItem(key)" class="up"> ↑ a>
<a @click="downItem(key)" class="down"> ↓ a>
<a @click="delItem(key)" class="del"> a>
li>
ul>
div>
<script>
var vm = new Vue({
el:"#todolist",
data:{
message:"",
dolist:[
"1",
"2",
"3",
],
},
methods:{
addItem(){
if(this.message==""){
return false
}
this.dolist.push(this.message);
this.message=""
},
delItem(key){
this.dolist.splice(key,1);
},
upItem(key){
if(key==0){
return false
}
var result = this.dolist.splice(key,1);
this.dolist.splice(key-1,0,result[0])
},
downItem(key){
var result = this.dolist.splice(key,1);
this.dolist.splice(key+1,0,result[0])
}
}
})
script>
body>
html>ジョブ2
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../day04/vue.js">script>
<style>
#goods table{
width: 600px;
border:1px solid #000;
border-collapse: collapse;
}
#goods td,#goods th{
border: 1px solid #000;
}
#goods .box{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #eee;
width: 280px;
height: 160px;
padding: 40px 80px;
}
#goods
.box_display{
display:none
}
style>
head>
<body>
<div id="goods">
<button @click="show_box"> button>
<table>
<tr>
<th> idth>
<th> th>
<th> th>
<th> th>
<th> th>
tr>
<tr v-for="item,index in item_list">
<td>{{index}}td>
<td>{{item.name}}td>
<td>
<button @click="sub">-button>
<input type="text" size="2" v-model="item.amount">
<button @click="++item.amount">+button>
td>
<td>{{item.price}}td>
<td>
<button @click="show_box"> button>
<button @click="delItem"> button>
td>
tr>
<tr>
<td colspan="5" > ： {{sum}} td>
tr>
table>
<div :class="box_css">
: <input type="text" v-model="name" id="name"><br><br>
: <input type="text" v-model="amount" id="amount"><br><br>
: <input type="text" v-model="price" id="price"><br><br>
<button @click="addItem"> button>
<button @click="editItem">bjbutton>
<button @click="hide_box"> button>
div>
div>
<script>
var vm = new Vue({
el:"#goods",
data:{
box_css:{
box_display:true,
box:false
},
item_list:[
item_data={
id:1,
name:'iphone11',
amount:1,
price:4399,
}
],
id:'',
name:"",
amount:"",
price:"",
sum:0
},
methods: {
show_box() {
this.box_css = {
box_display: false,
box: true
}
},
hide_box() {
this.box_css = {
box_display: true,
box: false
}
},
sub(){
if(this.amount<=1){
this.amount=0;
}else{
this.amount--;
}
},
addItem(index){
// if(this.name && this.amount && this.price){
// return false
// }
var item_data = {
id:index,
name: this.name,
amount: this.amount,
price: this.price,
};
this.item_list.push(item_data);
this.name='';
this.amount='';
this.price='';
},
delItem(index){
this.item_list.splice(index,1)
},
editItem(index){
item_data={
id:this.index,
name:this.name,
amount:this.amount,
price:this.price,
};
this.item_list.splice(item_data.id,1,item_data);
this.name='';
this.amount='';
this.price='';
},
}
})
script>
body>
html>