新建一个HTML页面，输入如下代码并运行，掌握在Vue中 v-for指令(循环操作)的使用和key属性的使用，保存文档为eaxmple3.html。v-for的默认行为会尝试原地修改元素而

最新推荐文章于 2023-10-28 17:12:59 发布

我的小鱼你醒了～

最新推荐文章于 2023-10-28 17:12:59 发布

阅读量154

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_73958332/article/details/130033293

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是一个使用Vue.js框架的示例，创建了一个简单的HTML页面，包含两个输入框分别绑定id和name数据，以及一个添加按钮。当点击添加按钮时，会将当前id和name的值插入到列表的开始位置，实现了动态数据绑定和列表渲染功能。

摘要由CSDN通过智能技术生成


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
</head>
<body>

	<div id="app">
      id:<input type="text" v-model="id">name:<input type="text" v-model="name">
      <input type="button" value="添加" @click="add">
       <p v-for="item in list"  :key="item.id">
         <input type="checkbox">{{item.id}}-----{{item.name}}
       </p>
	</div>
	<script> 
      var vm=new Vue({
      	el:"#app",
      	data:{
      		id:'',
      		name:'',
      		list:[
      		   {id:1,name:"zhang"},
      		   {id:2,name:"zhao"},
      		   {id:3,name:"huang"},
      		   {id:4,name:"li"}
      		]
         },
      	methods:{
         add:function(){
         this.list.unshift({id:this.id,name:this.name});
         }
        }
    })
	</script>
</body>
</html>