vuejs作业

最新推荐文章于 2024-07-01 00:59:42 发布

不想成小白

最新推荐文章于 2024-07-01 00:59:42 发布

阅读量945

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_63167889/article/details/127671598

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="vue.js"></script>
<style>
table{
border:1px solid #ccc;
border-collapse:collapse;
}
th,td{
height: 30px;
width: 100px;
text-align:center;
border:1px solid #ccc;
}
th{
height: 30px;
background-color:#ccddee;
}
.left{
width: 60px;
}

</style>
</head>
<body>
<div id="app">
<table>
<tr>
<th class="left"></th>
<th>商品名称</th>
</tr>
<tr v-for="v,i in list">
<td class="left">{{i+1}}</td>
<td>{{v}}</td>
</tr>
</table>
<p>
<input type="button" value="头部增加" @click="headadd()">
<input type="button" value="头部删除" @click="headdel()">
<input type="button" value="尾部增加" @click="add2()">
<input type="button" value="尾部删除" @click="del2()">
<input type="button" value="修改第5个元素" @click="changefive()">
<input type="button" value="删除第5个元素" @click="delfive()">
<input type="button" value="排序" @click="">
<input type="button" value="筛选" @click="">
<input type="button" value="倒叙" @click="">
</p>

</div>
<script>
new Vue({
el:'#app',
data:{
list:['乒乓球','羽毛球','篮球','足球','轮滑','滑板','网球','高尔夫','台球','排球']
},
methods:{
headadd:function(){
let info = prompt('请输入信息：')
this.list.unshift(info)
},
headdel:function(){
this.list.shift
},
add2:function(){
let info = prompt('请输入信息：')
this.list.push(info)
},
del2:function(){
this.list.pop()
},
changefive:function(){
let info = prompt('请输入信息：')
this.list.splice(4,1,info)
},
delfive:function(){
this.list.splice(4,1)
}
}
})
</script>
</body>
</html>