<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="JQuery/jquery-3.4.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent="insert">
<input type="text" v-model="formData.name">
<input type="text" v-model="formData.sex">
<input type="submit">
</form>
<table class="table ">
<thead>
<th>姓名</th>
<th>性别</th>
<th>删除</th>
</thead>
<tbody>
<tr v-for="value,index in list">
<td>{{value.name}}</td>
<td>{{value.sex}}</td>
<td>
<button @click="del(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
//引用类型问题
var vm=new Vue({
el:"#app",
data:{
formData:{
name:'',
sex:'',
age:'',
achievement:''
},
list:[]
},
methods:{
insert(){
let obj = {};
obj.name = this.formData.name;
obj.sex = this.formData.sex;
this.list.push(obj);
},
del(i){
if(confirm("是否删除数据?")){
this.list.splice(i,1)
}
}
}
})
</script>
</body>
</html>
2、vue的v-for语法可以遍历那些值,分别写出遍历不同值的代码
这是第 {{i}} 个P标签
迭代data中的普通对象
{{val}} — {{key}} — {{i}}
角标:{{index}}------ 键名: {{key}} ------ 值:{{value}}
3、文字叙述v-model和v-bind的差别
1.v-model:
主要是用在表单元素中,它实现了双向绑定。在同事使用v-bind和v-model中,v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权,会强制实行双向绑定。很多时候v-model使用在表单的中实现双向绑定。
2.v-bind:
eg:v-bind:class 可简写为 :class;
当加上v-bind:之后,它的值classe不是字符串,而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值,它就会给class属性传递什么值,当data.classed发生变化的时候,class属性也发生变化,这非常适合用在通过css来实现动画效果的场合。他只是单向变动。