ユーザーとカートの追加
6214 ワード
ユーザーの追加:
<style type="text/css">
table{
text-align: center;
margin-top: 40px;
}
*{
padding: 0;
margin: 0;
}
.header{
width: 900px;
margin: 0 auto;
}
h1{
font-weight: 400;
text-align: center;
}
input{
width: 900px;
height: 40px;
border-radius: 5px;
border: 1px #ccc solid;
}
.header p{
margin-top: 20px;
}
.header button{
width: 70px;
height: 40px;
margin-top: 20px;
border-radius: 5px;
}
table{
width: 900px;
}
</style>
</code></pre>
<pre><code> <script src="js/vue.js" type="text/javascript" charset="utf-8"/>
<div class="header">
<h1> </h1>
<p> :</p>
<input type="text" v-model="ta.name"/>
<p> :</p>
<input type="text" v-model="ta.age"/>
<p> ：</p>
<input type="text" v-model="ta.an"/>
<button style="background:#337ab7 ;" v-on:click="art"> </button>
<button style="background:#5cb85c ;"> </button>
<table border="" cellspacing="0" cellpadding="">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr v-for="(v,index) in arrs">
<td>{{index+1}}</td>
<td>{{v.name}}</td>
<td>{{v.age}}</td>
<td>{{v.an}}</td>
<td><button v-on:click="ar(index)"> </button></td>
</tr>
</table>
</div>
</code></pre>
<pre><code> <script type="text/javascript">
new Vue({
el:'.header',
data:{
ta:{
num:'',
name:'',
age:'',
an:'',
},
arrs:[
{num:1,name:"yang",age:18,an:'yang.com'},
{num:2,name:"zhang",age:19,an:'yang.com'},
{num:3,name:"wang",age:20,an:'yang.com'}
],
},
methods:{
art:function(){
this.arrs.push(this.ta),
this.ta={}
},
ar:function(ind){
this.arrs.splice(ind,1)
}
}
})
</script>
</code></pre>
<h1> ：</h1>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style>
table{
width:900px;
margin:50px auto;
text-align: center;
}
</style>
</code></pre>
<pre><code>
<div id="app">
<table border="" cellspacing="0" cellpadding="">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr v-for="(v,index) in arrs">
<td>{{index+1}}</td>
<td>{{v.name}}</td>
<td> {{v.age}}</td>
<td> <button v-on:click="jia(index)">+</button>{{v.an}}<button v-on:click="jian(index)">-</button></td>
<td>{{v.age*v.an}}</td>
</tr>
</table>
</div>
</code></pre>
<pre><code> <script src="js/vue.js" type="text/javascript" charset="utf-8"/>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
arrs:[
{num:1,name:" ",age:1,an:'4'},
{num:2,name:" ",age:2,an:'5'},
{num:3,name:" ",age:3,an:'6'}
],
arr:['h'],
},
methods:{
jia:function(index){
this.arrs[index].an++;
},
jian:function(index){
this.arrs[index].an--;
},
}
})
</script>
</code></pre>
</article>
</div>
</div>
<style type="text/css">
table{
text-align: center;
margin-top: 40px;
}
*{
padding: 0;
margin: 0;
}
.header{
width: 900px;
margin: 0 auto;
}
h1{
font-weight: 400;
text-align: center;
}
input{
width: 900px;
height: 40px;
border-radius: 5px;
border: 1px #ccc solid;
}
.header p{
margin-top: 20px;
}
.header button{
width: 70px;
height: 40px;
margin-top: 20px;
border-radius: 5px;
}
table{
width: 900px;
}
</style>
</code></pre>
<pre><code> <script src="js/vue.js" type="text/javascript" charset="utf-8"/>
<div class="header">
<h1> </h1>
<p> :</p>
<input type="text" v-model="ta.name"/>
<p> :</p>
<input type="text" v-model="ta.age"/>
<p> ：</p>
<input type="text" v-model="ta.an"/>
<button style="background:#337ab7 ;" v-on:click="art"> </button>
<button style="background:#5cb85c ;"> </button>
<table border="" cellspacing="0" cellpadding="">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr v-for="(v,index) in arrs">
<td>{{index+1}}</td>
<td>{{v.name}}</td>
<td>{{v.age}}</td>
<td>{{v.an}}</td>
<td><button v-on:click="ar(index)"> </button></td>
</tr>
</table>
</div>
</code></pre>
<pre><code> <script type="text/javascript">
new Vue({
el:'.header',
data:{
ta:{
num:'',
name:'',
age:'',
an:'',
},
arrs:[
{num:1,name:"yang",age:18,an:'yang.com'},
{num:2,name:"zhang",age:19,an:'yang.com'},
{num:3,name:"wang",age:20,an:'yang.com'}
],
},
methods:{
art:function(){
this.arrs.push(this.ta),
this.ta={}
},
ar:function(ind){
this.arrs.splice(ind,1)
}
}
})
</script>
</code></pre>
<h1> ：</h1>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style>
table{
width:900px;
margin:50px auto;
text-align: center;
}
</style>
</code></pre>
<pre><code>
<div id="app">
<table border="" cellspacing="0" cellpadding="">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr v-for="(v,index) in arrs">
<td>{{index+1}}</td>
<td>{{v.name}}</td>
<td> {{v.age}}</td>
<td> <button v-on:click="jia(index)">+</button>{{v.an}}<button v-on:click="jian(index)">-</button></td>
<td>{{v.age*v.an}}</td>
</tr>
</table>
</div>
</code></pre>
<pre><code> <script src="js/vue.js" type="text/javascript" charset="utf-8"/>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
arrs:[
{num:1,name:" ",age:1,an:'4'},
{num:2,name:" ",age:2,an:'5'},
{num:3,name:" ",age:3,an:'6'}
],
arr:['h'],
},
methods:{
jia:function(index){
this.arrs[index].an++;
},
jian:function(index){
this.arrs[index].an--;
},
}
})
</script>
</code></pre>
</article>
</div>
</div>