一、主要运用vue基础语法,写一个基础的小项目练习,练习基本语法掌握情况
效果图:附源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../public/js/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background: #f1f1f1;
}
#app {
width: 1000px;
margin: 20px auto;
padding: 50px;
background: white;
}
#app div:nth-of-type(1) {
height: 100px;
}
#app div:nth-of-type(1) input {
outline: none;
height: 50px;
width: 100%;
border: solid 3px #00bcd4;
font-size: 20px;
padding: 5px;
color: rgb(124, 162, 225);
}
table {
border: solid 1px #888;
border-radius: 5px;
overflow: hidden;
}
table th {
background: #6ab4d8;
color: white;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 22px;
}
table td {
height: 30px;
line-height: 30px;
text-align: center;
color: #333;
font-size: 18px;
padding: 10px;
}
table td:nth-of-type(1) {
width: 80px;
}
table td:nth-of-type(2) {
width: 200px;
}
table td:nth-of-type(3) {
width: 200px;
}
.btn {
width: 100px;
font-size: 16px;
height: 40px;
border-radius: 20px;
border: none;
color: white;
cursor: pointer;
}
.edit {
background: rgb(127, 235, 127);
}
.del {
background: rgb(215, 14, 34);
}
.edit:hover {
background: rgb(108, 212, 108);
font-weight: 800;
}
.del:hover {
background: rgb(215, 16, 16);
font-weight: 800;
}
.h {
margin: 20px auto;
color: rgb(35, 190, 190);
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h2 class="h">vue基础实例</h2>
<div>
<!-- @keyup.enter当鼠标按下时触发事件 -->
<input type="text" v-model="brandInfo" @keyup.enter="submit" placeholder="请输入名称价格-格式名称:价格">
</div>
<table width="900" border="1" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in brandList" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price | priceFilter}}</td>
<td>
<button class="btn edit" @click="editBrand(item)">编辑</button>
<button class="btn del" @click="delBrand(item)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
brandId: '',
brandInfo: '',
brandList: [
{ id: 1, name: '小米', price: 3999 }
]
},
filters: {
priceFilter(val) {
//toFixed(2)点后面几个零
return '¥' + parseFloat(val).toFixed(2) + "元"
}
},
watch: {
},
computed: {
},
methods: {
editBrand(item) {
this.brandId = item.id;
this.brandInfo = item.name + ":" + item.price
},
delBrand(item) {
//删除数据
let ret = confirm(`确定要删除${item.name}吗?`)
if (!ret) return
let index = this.brandList.findIndex(it => it.id === item.id)
//console.log(index)
//替换数据为空
this.brandList.splice(index, 1)
},
submit() {
//验证数据是否为空
if (this.brandInfo.trim() === "") {
alert('没有填写数据')
return
}
//验证数据格式
if (this.brandInfo.indexOf(":") <= 0) {
alert("数据格式不合法")
return
}
//拆分数据
//拿到数据后用split数组方法切割数据
let [name, price] = this.brandInfo.split(":")
if (this.brandId) {
/* console.log(name)
console.log(price) */
let index = this.brandList.findIndex(it => it.id === this.brandId)
this.brandList[index].name = name;
this.brandList[index].price = price;
} else {
let id = this.brandList.length > 0 ? this.brandList[0].id + 1 : 1
console.log(id)
console.log(this.brandList.length)
//添加到末尾
this.brandList.push({ id, name, price })
alert('添加成功')
}
//数据清空
this.brandInfo = ''
this.brandId = ''
}
}
})
</script>
</body>
</html>