取消button的点击效果_（Vue动效）6.Vue中列表过渡效果

最新推荐文章于 2023-02-01 11:28:15 发布

weixin_39996101

最新推荐文章于 2023-02-01 11:28:15 发布

阅读量1k

点赞数

文章标签：取消button的点击效果

关键词：列表过渡<transition>过渡

一、实现：每点击一次按钮，就会增加一条数据

<body>
  <div id="root">
    <div v-for="item of list" :key="item.id">
	{
    {item.title}}
    </div>
    <button @click="handleBtnClick">Add</button>
  </div>
  <script>
     var count = 0;
     var vm = new Vue({
	el: "#root",
	data: {
	  list: []
	},
	methods: {
	 handleBtnClick: function(){
	   this.list.push({
             id: count++,
             title: 'hello world'
	    })
	 }
       }
     })
  </script>
</body>

试一下吧，点击 Add 按钮试着增加一些数据看看效果吧

二、

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39996101

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
取消button的点击效果_（Vue动效）6.Vue中列表过渡效果

关键词：列表过渡<transition>过渡一、实现：每点击一次按钮，就会增加一条数据<body> <div id="root"> <div v-for="item of list" :key="item.id"> {{item.title}} </div> <button @click="handle...
复制链接

扫一扫