循环的写法。v-for

最新推荐文章于 2023-10-28 17:12:59 发布
最新推荐文章于 2023-10-28 17:12:59 发布
阅读量154 收藏
点赞数
分类专栏： JavaScript vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40945354/article/details/120037530
版权
vue 同时被 2 个专栏收录
722 篇文章 4 订阅
订阅专栏
JavaScript
628 篇文章 6 订阅
订阅专栏 
<!DOCTYPE html>

<body>

  <script url="https://vue.next@"></script>
  <script>
 const vm = Vue.createApp({
   data() {
     return {
       books: [
         {title: 'Java无难事'},
         {title: 'VC++深入详解'},
         {title: '元元'}
       ]
     }
   }
 })

  </script>
</body>

</html>

报错：34.html:7 Uncaught ReferenceError: Vue is not defined
at 34.html:7

修改

<!DOCTYPE html>

<body>

<script url="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books: [
         {title: 'Java无难事'},
         {title: 'VC++深入详解'},
         {title: '元元'}
       ]
     }
   }
 }).amount("#app")

  </script>
</body>

</html>

还这样
又改

<!DOCTYPE html>

<body>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books: [
         {title: 'Java无难事'},
         {title: 'VC++深入详解'},
         {title: '元元'}
       ]
     }
   }
 }).amount("#app")

  </script>
</body>

</html>

报错：
34.html:17 Uncaught TypeError: Vue.createApp(…).amount is not a function
at 34.html:17

<!DOCTYPE html>

<body>
<div id="app"></div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books: [
         {title: 'Java无难事'},
         {title: 'VC++深入详解'},
         {title: '元元'}
       ]
     }
   }
 }).amount("#app")

  </script>
</body>

</html>

还报错，跟上面一样
改

<!DOCTYPE html>

<body>
<div id="app">
  <li>
    <p v-for="book in books">book</p>
  </li>
</div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books: [
         {title: 'Java无难事'},
         {title: 'VC++深入详解'},
         {title: '元元'}
       ]
     }
   }
 }).amount("#app")

  </script>
</body>

</html>

title没放，
一开始以为放在books这里呢
原来不是
原来是放到插值这里
一放解千愁

<!DOCTYPE html>

<body>
<div id="app">
  <li>
    <p v-for="book in books">{{ book.title }}</p>
  </li>
</div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books: [
         {title: 'Java无难事'},
         {title: 'VC++深入详解'},
         {title: '元元'}
       ]
     }
   }
 }).amount("#app")

  </script>
</body>

</html>

li标签，不是

标签，为啥不是p呢？
不明白

<!DOCTYPE html>

<body>
<div id="app">
  
    <li v-for="book in books">{{ book.title }}</li>
  </li>
</div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books: [
         {title: 'Java无难事'},
         {title: 'VC++深入详解'},
         {title: '元元'}
       ]
     }
   }
 }).amount("#app")

  </script>
</body>

</html>

还是不行。
v-for循环咋没出来？

怎么还报这个错？
34.html:23 Uncaught TypeError: Vue.createApp(…).amount is not a function
at 34.html:23

<!DOCTYPE html>

<body>
<div id="app">
  
    <li v-for="book in books">{{ book.title }}</li>
</div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books: [
         {title: 'Java无难事'},
         {title: 'VC++深入详解'},
         {title: '元元'}
       ]
     }
   }
 }).amount('#app')

  </script>
</body>

</html>

加了ul也还是不行

<!DOCTYPE html>

<body>
<div id="app">
  <ul>
    <li v-for="book in books">{{ book.title }}</li>
  </ul>
</div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books: [
         {title: 'Java无难事'},
         {title: 'VC++深入详解'},
         {title: '元元'}
       ]
     }
   }
 }).amount("#app")

  </script>
</body>

</html>

多写了一个a，写成amount了？！！

<!DOCTYPE html>

<body>
<div id="app">
  <ul>
    <li v-for="book of books">{{ book.title }}</li>
  </ul>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books: [
         {title: 'Java无难事'},
         {title: 'VC++深入详解'},
         {title: '元元'}
       ]
     }
   }
 }).mount('#app')

  </script>
</body>

</html>

终于好了
ul有什么作用？

与li一起使用，定义无序列表
没看出来没有ul只有li有什么不一样

hamimelon2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
v-for的使用
m0_64776383的博客
07-05 232
结果复制vue语法复制复制。
v-for 标准写法
weixin_44911525的博客
11-11 1150
这个问题很多次， 一定要记一下。 要加key!!
v-for用法小结
qq_41132332的博客
12-25 2170
vue-for用法小结 第一次写博客，有不当之处望大家多多指教。 不记得是看过哪个博主的文章才理解v-for的用法，希望没有侵权，迫不及待和大家分享一下。 下面我将通过迭代，普通数组，对象数组，以及对象三个方面展现v-for的神奇用法。话不多说直接上代码。 &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&qu
v-for 语法易错点
qq_42684926的博客
08-05 743
v-for 循环数组 1.v-for 后的写法 错误写法：v-for（book in booklist） 正确写法：v-for = 'book in booklist' 2.book 代表的含义 循环 booklist 数组时，定义了一个名为 book 的变量，每次循环都将数组中的每个元素依次赋值给 book 变量。所以使用 v-for 后的结果时，插值表达式 {{}}内的值应该写 book这个变量。变量是不需要带双引号的。 3.v-for 后如果需要获取下标 index，则需要传入两个参数，两个参数的写法
html如何用v-for遍历,Vue中的v-for遍历循环
weixin_39946274的博客
06-17 1365
1. V-for和key属性1. 便利数组，参数(item,index) in list2. 便利对象，参数(value,key,index) in list3. 便利数字，num in 10 (1~10)4. key在使用v-for的时候都需要去设置key4.1 让界面元素和数组里的每个记录进行绑定4.2 key只能是字符串或者数字4.3 key必须是唯一的{{item.name}}数组的下标索...
Vue简单学习之关于 html 标签属性 v-for, v-if, v-show使用
无根的浮萍
03-05 3915
v-for 循环 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&qu
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
12-29
数据结构为数组中包含对象–树形结构，用Vue组件的写法实现以下的效果： ...本文为用Vue实现方式，... <table v-for=item v-bind:list=item> 组件模板代码 <script type=text/x-template id=table-component-tem
Vue自定义指令写法与个人理解
10-17
在Vue中，预定义了一些内置指令，如v-if、v-else、v-for等，用于条件渲染、循环遍历等常见任务。然而，Vue也允许开发者自定义指令，以满足特定需求。 Vue自定义指令的创建主要是通过`Vue.directive()`函数来完成。...
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
10-17
其次，对于使用`v-for`循环遍历的数据，同样需要确保数据加载完成后再进行渲染。例如，可以使用一个标志变量来控制swiper的显示状态。在数据请求开始时，将标志设为`false`，数据加载完成后，再将标志设回`true`，...
解决vue项目input输入框双向绑定数据不实时生效问题
10-15
2. **修正`v-for`语法**：如果警告导致了问题，需要修正`v-for`的写法。去掉括号，使`v-for`指令简化为`v-for="bb in cc.content"`，同时保持`key`为`bb.contentName`。这样既能保持唯一性，又符合Vue的语法规范。 ...
html如何用v-for遍历,v-for循环遍历
weixin_33511821的博客
06-10 3139
你这样定义data肯定有问题的第一次循环肯定是第一行{ "审核管理": [ { "title": "头像审核", "url": "userList" }, { "title": "动态审核管理", "url": "userActivity" }, { "title": "评论审核管理", "url": "comment" }, { "title": "举报管理", "url": "reportRe...
HTML简单实现v-if与v-for与v-model
最新发布
Yyds12300的博客
10-28 1753
首先VIewModel将View和Model连接一起，Model的数据改变View的数据也变使用Visual Studio Code启动Vue需要vue.js插件和导入CDN(包)vue.js插件：CTRL + shift + x 在搜索栏搜索vue.js安装即可CDN：VS创建一个.html的文件< div>< /div>块为view层（模板）< script>< /script>块为Model层（数据）ViewModel的体现：在浏览器的控制面板（Console),输入。
v-for指令的使用
wqy18378671261的博客
05-30 9181
1、什么是v-for指令？ v-for指令是基于一个数组来重复渲染的元素，通常用于显示列表和表格数据。需要每项提供一个唯一的key属性。 v-for指令还可以遍历一个对象的属性，其中v-for指令可以提供第二个参数为property名称(也就是键名)，还可以用第三个参数作为索引。 v-for指令渲染列表时，它默认使用“就地更新”。这个默认模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态(如表单输入值)的列表渲染输出。 特殊语法：“ item in items ”，【 item：被迭代的数组元素的别
vue html代码中写for循环,Vue的学习笔记（下篇）
weixin_36397104的博客
05-30 2115
原标题：Vue的学习笔记(下篇)一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。前面几天我们已经分享了Vue的学习笔记(中篇)和Vue的学习笔...
html如何用v-for遍历,浅析vue中常见循环遍历指令的使用 v-for
weixin_31970409的博客
06-17 824
vue中循环遍历使用的指令是v-for1.v-for遍历数组(1)value in arr 遍历数组中的元素(2)(value,index) in arr 遍历数组中的元素和数组下标运行代码：{{value}}{{value}}--{{index}}new Vue({el:".box",data:{arr:["哈哈","嘻嘻","哼哼"]}});输出结果：2.v-for遍历json对象(1)val...
html5 支持v-for吗,很多人不知道 v-for 可以这样解构！
weixin_36249804的博客
06-30 930
作者：Michael Thiessen译者：前端小智来源：medium点赞再看，养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。最近发现我们可以使用v-for进行解构。之所以起作用，是因为 Vue 将v-for的整个...
v-html和v-for不能同时使用 解决方案
wu_yans的博客
02-13 427
v-html 不能显示问题，已解决
html中如何循环数组渲染dom,列表渲染 之 v-for遍历数组和对象(利用key属性实现高效更新)...
weixin_42513209的博客
06-19 1946
(1) 遍历数组和对象Document列表{{list[0]}}{{list[1]}}{{list[2]}}{{list[3]}}遍历数组{{item}}{{index}}-{{item}}遍历对象{{item}}{{key}}：{{item}}{{index}}：{{key}}：{{item}}var vm = new Vue({el:"#app",data:{list:["火龙果","龙眼",...
v-for循环map写法
04-21
v-for循环结合map写法可以用于渲染数组或对象。示例代码如下： ``` <li v-for="(value, key) in myMap"> {{ key }}: {{ value }} export default { data() { return { myMap: new Map([ ['John', 28], ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值