vue数据前端增删功能

最新推荐文章于 2023-01-10 22:05:08 发布

WinterWang0207

最新推荐文章于 2023-01-10 22:05:08 发布

阅读量738

点赞数

分类专栏： Vue 案例

Vue 案例专栏收录该内容

91 篇文章 10 订阅

订阅专栏

最终效果：

代码：

<template>
       	<div id="box">
		<input type="text" v-model="msg">
		<button @click="add">发布</button>
			<ul>
				<li v-for="(v,i) in arr">{{v}} <span @click="remove(i)">x</span></li>
			</ul>
		</div>
</template>

 <script>
export default {
    data(){
        return{ 
                msg:'',
				arr:['这是第一条微博','这是第二条微博','这是第三条微博']
             }
        },

    mounted () {
      
    },

    methods: {
    //增
      add(){
      this.arr.unshift(this.msg);
      this.msg=" ";
      },
    //删
      remove(i){
      this.arr.splice(i,1);
      console.log(i)
      }
    },
 
    }
</script>

	<style scope>
	*{
		margin: 0;
		padding: 0;
	}
	#box{
		padding: 0 100px;
		margin-top: 30px;
	}
	ul{
		margin-top: 30px;
	}
	li{
		background: #ddd;
		padding: 10px 30px;
		margin-bottom: 10px;
		position: relative;
		list-style: none;
		color: #666;
	}
	span{
		cursor: pointer;
		position: absolute;
		right: 30px;
	}
	input[type=text]{
		width: 70%;
		height: 35px;
	}
	button{
		width: 70px;
		height: 39px;
		position: relative;
		top: 1px;
		background: #ddd;
		outline: none;
		color: #666;
		cursor: pointer;
	}
	</style>