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

最新推荐文章于 2023-07-12 09:01:23 发布
最新推荐文章于 2023-07-12 09:01:23 发布
阅读量131 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73958332/article/details/130033293
版权 

<!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>

我的小鱼你醒了～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
快速搭建vue + element 的html文件
qq1143417367的博客
04-12 1172
快速搭建vue + element 的html文件 当在正常的浏览查看element的文档时 会告诉你这么cdn引入，但是按照文档 步骤会发现css的引入文件会不生效。下面是解决方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
vue小白入门到精通之创建html页面儿
菜鸟猿-小毅的博客
05-07 1944
VUE小白之路创建html页面儿菜鸟方式引入vue的js 创建html页面儿 首先要知道一个完整的页面儿由html+css+js组成 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
vue中HTML 如何循环对象
qq_38909255的博客
12-31 1423
vue中HTML 如何循环对象
Vue项目 想在html部分的循环使用字符串模板，解决方法
phhz的博客
10-07 774
data里有blueNum、pinkNum、redNum变量，item值是’blue’,‘pink’,‘red’，本来是想这样写来展示： <div :class="`ball${index} ball`" v-for="(item, index) in ballMap" :key="item" @click="handleShowCall(item)"> <span> {{ this[`${item}Num`] }}</span> </div> 但是
三、html页面构建Vue项目步骤思路
qq_23135259的博客
01-30 2070
html构建vue项目思路
Vue用v-for给循环标签自身属性添加属性值的方法
10-17
主要介绍了Vue用v-for给循环标签自身属性添加属性值的方法，文中大家给大家列举了三种方法 ,需要的朋友可以参考下
Vue中的v-for循环key属性注意事项小结
10-18
主要介绍了Vue中的v-for循环key属性注意事项小结,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue中v-for循环选中点击的元素并对该元素添加样式操作
11-20
但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化 html： ()'> <span>{{item.name}} css： .addclass{ color : red;...
vue中v-for循环给标签属性赋值的方法
12-29
1.给每个按钮添加class的属性值以及icon图标属性值，通过v-for实现自动添加样式，发现属性值无法显示，切记在属性前加上v-bind <html> <head> <meta charset=utf-8> <title>v-for在线测试...
vue cli 添加html,vue-cli创建的项目,配置多页面的实现方法
weixin_39527911的博客
06-18 546
vue官方提供的命令行工具vue-cli，能够快速搭建单页应用。默认一个页面入口index.html，那么，如果我们需要多页面该如何配置，实际上也不复杂假设要新建的页面是rule，以下以rule为例创建新的html页面创建入口文件Rule.vue和rule.js，仿照App.vue和main.jsexport default {name: 'lottery',data() {return {}},...
v-for的简单实现
weixin_33708432的博客
08-24 1010
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li{ height:30px; line-height:30px ...
vue v-for用法
weixin_44691220的博客
09-29 1715
本次需求是点击添加按钮复制一个同样的表单内容，最先是想通过基础的html、css以及js来实现，但是这样不仅内容冗余度高，而且对于后期数据维护和修改非常不便，此时就想到了擅长解决数据问题的框架----Vue： vue中有一种是专门用于循环数据的指令—v-for, v-for 可以绑定数据到数组来渲染一个列表。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据...
Vue 循环指令(学习)
MengShang_Cpp的博客
06-30 667
Vue.js循环指令的学习
【html页面引入vue3语法模板】在html页面中使用vue3语法和elementul-plus组件库的简单模板
最新发布
seeeeeeeeeee的博客
07-12 2857
这是最近在看这些东西，因为看别的地方是用脚手架直接用的。我这个项目想要在html上直接使用。所以我就试了下如何在html上使用vue3语法目前摸索出来的是这样可以使用。记录下来供参考，如果有不好的地方后续改进。
Vue.js使用v-for循环生成动态标签
tanxinji的博客
01-11 9451
使用v-for可以用于动态生成html标签。其实就是对于vue中属性是对象或者数组进行遍历生成新的标签。 v-for就像java中的for循环一样，迭代需要的所有元素。 大多数情况是以一个数组嵌套多个对象的数据进行v-for循环 一、当写入数据为数组时 如果循环遍历得到的value值是一个对象，需要使用里面的值可以用 对象名.key 来调用key对应的value值 v-for写入数组的格式: arr...
Vue中的v-for循环，实现div块的循环生成
热门推荐
qq_58372242的博客
03-09 1万+
前言 大家好,这里是果力成,老规矩,学之!最近在做前端页面遇到一个小问题，说来也不难，但还是花费了我的好些时间，保持习惯记录一下。在前端学习中不免遇到一个div或者一个数组的循环产生，因为挨个儿传数据显然不是最优的。这里讲述的是Vue中的 v-for循环，生成的是div块。 HTML v-for，可以循环普通的数组，数字，对象。这些在其他优秀博主那里会得到非常详细的介绍，参考如下： http://t.csdn.cn/aBwsD 我就不做赘述啦。 简单说明一下，当前的页面只有一个div块级元素，需求是
循环结构 遍历数组
海阔天空
01-16 192
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>水果列表</div> <ul> <li v-f...
教你搭建一个页面秒开的Vue项目
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
09-20 4459
在 web中，页面打开速度是考量一个项目好坏非常重要的指标，因此在项目开始开发之前需要着重解决的问题（在主文件 main.js中引用大量的依赖是一个非常忌讳的事情）。下面是我为减少打包后文件过大的几个要点。...
vue.js v-model的运算
qq_37805832的博客
02-15 1420
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javasc
Vue用v-for给循环标签其他属性添加属性值的方法 给出代码示例
05-26
可以在v-for循环标签上使用v-bind来绑定其他属性的值，例如： ```html <li v-for="(item, index) in items" v-bind:key="index" v-bind:class="'list-item-' + index">{{ item }} ``` 在上面的示例中，我们使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值