<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--v-for-->
<!--v-model 雙向數(shù)據(jù)綁定 一般對表格類單位使用-->
<div id="jie">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
<script>
new Vue({
el:'#jie',
data:{
msg:'adw'
}
})
</script>
</body>
</html>
v-model 雙向數(shù)據(jù)綁定 一般對表格類單位使用 輸出結(jié)果如下圖 表格中數(shù)據(jù)與下方數(shù)據(jù)綁定 是一樣的
QQ截圖20180912163309.png
QQ截圖20180912163319.png
QQ截圖20180912163328.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="jie">
<p>{{msg}}</p>
<button v-on:click="alt">點擊</button>
</div>
<script>
new Vue({
el:'#jie',
data:{
msg:'hello word'
},
methods:{//存放函數(shù)(方法)
alt:function(){
this.msg='hello 瓦羅蘭大陸'
}
}
})
</script>
</body>
</html>
methods 存放函數(shù)
v-on 事件綁定 上圖是點擊事件 輸出結(jié)果為下
QQ截圖20180912170506.png
本是hello word 點擊按鈕后
QQ截圖20180912170628.png
如上圖所示變成hello 瓦羅蘭大陸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="jie">
<input type="text" v-model="a">
<button v-on:click="alt">添加按鈕</button>
<ul>
<li v-for="(value,index) in arr">{{value}} <button v-on:click="sc(index)">刪除</button></li>
</ul>
</div>
<script>
new Vue({
el:'#jie',
data:{
arr:['吃飯','睡覺','打豆豆'],
a:''
},
methods:{
alt:function(){
this.arr.push(this.a),
this.a=''
},
sc: function (ind) {
this.arr.splice(ind,1)
}
}
})
</script>
</body>
</html>
注:
- 原生js中向數(shù)組中添加元素要用push,在vue中同樣要用push
2.vue實例中的方法要訪問對象實例中的數(shù)據(jù)要用this
3.刪除時要注意
輸出結(jié)果如下圖
QQ截圖20180912171524.png
QQ截圖20180912171551.png
QQ截圖20180912171642.png
QQ截圖20180912171650.png
作業(yè)1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
header{
width: 1000px;
margin: 0 auto;
}
input{
width: 1000px;
height: 30px;
}
button{
width: 70px;
height: 30px;
}
.tj{
margin-top: 20px;
margin-left: 400px;
margin-right: 50px;
background-color:mediumturquoise;
}
.cz{
margin-top: 20px;
background-color: navajowhite;
}
table{
width: 1000px;
margin: 50px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="jie">
<header>
<h3>姓名</h3>
<input type="text" v-model="arr1.name" placeholder="請輸入您的姓名">
<h3>年齡</h3>
<input type="text" v-model="arr1.year" placeholder="請輸入您的年齡">
<h3>郵箱</h3>
<input type="text" v-model="arr1.tel" placeholder="請輸入您的郵箱">
<button class="tj" v-on:click="sub">提交</button>
<button class="cz" >重置</button>
</header>
<table border=1 cellspacing="0">
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
<th>郵箱</th>
<th>操作</th>
</tr>
<tr v-for="(value,index) in arrs">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.year}}</td>
<td>{{value.tel}}</td>
<td><button v-on:click="dele(index)">刪除</button></td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#jie',
data: {
arr1:{
name:'',
year:'',
tel:'',
},
arrs: [
{name: 'Tom', year: '18', tel: 'Tom@126.com'},
{name: 'Jack', year: '19', tel: 'Jack@126.com'},
{name: 'Amy', year: '20', tel: 'Amy@126.com'}
]
},
methods:{
sub:function(){
this.arrs.push(this.arr1),
this.arr1={}
},
dele:function(ind){
this.arrs.splice(ind,1)
}
}
})
</script>
</body>
</html>
輸出結(jié)果如下
QQ截圖20180912172054.png
作業(yè) 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
table{
width: 1000px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="jie1">
<table border="1" cellspacing="0">
<thead>
<tr>
<th>編號</th>
<th>名稱</th>
<th>單價</th>
<th>數(shù)量</th>
<th>總價</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arrs">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
<td>
<button v-on:click="dele(index)">-</button>
{{value.num}}
<button v-on:click="add(index)">+</button>
</td>
<td>{{value.price*value.num}}</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>總計{{arr1}}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'#jie1',
data:{
arrs:[
{name:'香蕉',price:1,num:0},
{name:'蘋果',price:2,num:0},
{name:'鴨梨',price:3,num:0}
],
arr1:0
},
methods:{
dele:function(ind){
if(this.arrs[ind].num>=1){
this.arrs[ind].num-=1,
this.arr1-=this.arrs[ind].price
}
},
add:function(i){
this.arrs[i].num+=1,
this.arr1+=this.arrs[i].price
}
}
})
</script>
</body>
</html>
輸出如下圖
QQ截圖20180914101959.png
任何都系都要注意細節(jié)
