vue小例子-01
1.在components下建一个
2.代码如下：
<template>
<!--1.业务是开始有一组数据，序号，姓名，性别，年龄，操作（删除）
2.有三个输入框输入姓名，性别，年龄，（增加）
3.当输入东西后，按了增加按钮，将增加一组数据到数组中
4.当按了删除就会删除一组数据
主要业务如上
细节：（重点）
1.加样式让表格对齐等，像表格的感觉，表格如何设置宽高
2.引入背景图片方式
3.增加时验证是否有值输入在输入框
4.v-model双向绑定，导致增加到数组的数据也会发生变化，引用传递和值传递区别，利用对象复制，开辟新空间来存储
5.===会验证值和类型，==只能验证值
6.splice使用注意
7.css样式的使用
-->
<div>
<center>
<div class="top">
*姓名：<input type="text" v-model="datas.name" placeholder="请输入姓名" >
*性别<input type="text" v-model="datas.sex" placeholder="请输入性别">
*年龄<input type="text" v-model="datas.age" placeholder="请输入年龄">
<button @click="pushUsers" style="color:blue">增加</button>
<table class="top-left" >
<!-- <img src="~@/assets/timg.jpg"> 这是引入图片 -->
<br>
<!--
1.这里加了<thead>表头</thead> <tbody>表体</tbody>，则不对齐
2.其实可以认为th就是表头，td就是表体
3.想要表格变大，就是让每个单元格变大，
tr标签只能改变的是高度，td和th只能改变宽度
-->
<tr>
<th v-for="site in heads" :key="site" class="th1">{{site}}</th>
</tr>
<tr v-for="(user,index) in users" :key="user">
<td class="td1">{{index+1}}</td>
<td class="td1">{{user.name}}</td>
<td class="td1">{{user.sex}}</td>
<td class="td1">{{user.age}}</td>
<td class="td1"><button @click="deleteUsers(index)" style="color:blue">删除</button></td>
</tr>
</table>
</div>
</center>
</div>
</template>
<script>
export default{
data(){
return {
heads:['序号','姓名','性别','年龄','操作'],
datas:{name:'',sex:'',age:''},
users:[
{name:'张三',sex:'男',age:'22'},
{name:'李四',sex:'女',age:'24'},
{name:'小何',sex:'男',age:'25'}
]
}
},
methods:{
pushUsers(){
//这个要好好理解一下，这里目的是把datas对象复制，就是开辟个新空间。
//为啥具体要这步骤呢，
//1.当你不加的时候，当你增加了一个对象后，你改变输入框的值，数组中增加的对象的值也会跟着改变，因为数组和对象都是引用传递
//这里引用传递，相当就是我们一直是给一个内存地址赋值，所以才会跟着联改。引用传递：保存的是引用值（还是一个地址），值传递保存的是一个数据
//进行了一些表单验证
if(this.datas.name.trim()===""){
window.alert('请输入姓名');
return false;
}
if(this.datas.sex.trim()===''){
window.alert('请输入性别');
return false;
}
if(this.datas.age.trim()===''){
window.alert('请输入年龄');
return false;
}
let copy =Object.assign({},this.datas)
this.users.push(copy);
console.log("name:"+this.datas.name+",sex:"+this.datas.sex+",age:"+this.datas.age)
},
deleteUsers(index){
console.log("index:"+index)
this.users.splice(index,1);
//splice(index,num,item1,item2,item3....) 新增/删除/替换
//index，代表数组新增/删除时的索引值，num：删除多少个，item：代表新增哪些/替换掉删除的哪些
},
}
}
</script>
<style>
.top-left th,td{
border:1px solid #ccc;
margin: auto;
text-align: center;
/* 1px：代表边框的宽度 ，solid：代表实线，dotted（点状）,double(双线),dashed(虚线)
这里 th和td间要加一个，号
margin:外边距，auto：浏览器自动计算 ，也可以自己设置值
text-align:文本对齐方式，left 左对齐，right：右对齐，center：居中
*/
}
.top{
position: absolute;
width: 700px;
height:400px;
border: 1px solid red;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
margin: auto;
font-size: 16px;
color: blue;
/* 引入背景图方式 */
background: url('~@/assets/timg.jpg') center center no-repeat;
background-size : 700px,200px;
}
.th1 {
width: 80px;
}
.td1 {
width: 80px;
}
tr{
height: 80px;
}
</style>
3..index.js下添加路由
4.效果如图：
