VUE框架使用v-for遍历指定字符串次数对象和数组------VUE框架

已于 2023-11-29 21:48:16 修改
阅读量1.1k 收藏 17
点赞数 23
分类专栏： # VUE框架 前端 文章标签： vue.js 前端 javascript ecmascript 前端框架 vue js
于 2023-11-29 16:04:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134692351
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 遍历对象的属性,会取出属性名和属性值 -->
        <!-- 属性名在后,属性值在前 -->
        <ul>
            <li v-for="value,propName in user">{{propName}}={{value}}</li>
        </ul>
        <!-- 遍历字符串 -->
        <!-- 会取出字符串的每一个字符和下标,字符在前,下标在后 -->
        <ul>
            <li v-for="s,index in str">{{index}}{{s}}</li>
        </ul>
        <!-- 遍历指定的次数怎么操作 -->
        <!-- 左边是次数,右边是下标 -->
        <ul>
            <li v-for="(num,index) of counter">
                {{num}},{{index}}
            </li>
        </ul>
        <h1>{{msg}}</h1>
        <!-- 静态列表 -->
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ul>
        <!-- 动态列表 -->
        <ul>
            <!-- v-for要写在循环项上 -->
            <li v-for="name in names">{{name}}</li>
        </ul>
        <!-- 用in和of效果是一样的 -->
        <ul>
            <!-- v-for要写在循环项上 -->
            <!-- v-for="变量名,下标 in/of 变量" -->
            <!-- 变量名代表每一个元素 -->
            <li v-for="name,x of names">{{x}}:{{name}}</li>
        </ul>
        <ul>
            <li v-for="vip,index in vips">
                序列号:{{index}}
                会员名:{{vip.username}}
                id:{{vip.id}}
                年龄:{{vip.age}}
            </li>
        </ul>
        <table>
            <tr>
                <th>序列号</th>
                <th>会员名</th>
                <th>id</th>
                <th>年龄</th>
                <th>选择</th>
            </tr>
            <tr v-for="vip,index in vips">
                <td>{{index}}</td>
                <td>{{vip.username}}</td>
                <td>{{vip.id}}</td>
                <td>{{vip.age}}</td>
                <td><input type="checkbox"/></td>
            </tr>
        </table>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                names : ["Jack","Rose","James"],
                vips : [
                    {username : "Jack",id : 1,age : 20},
                    {username : "Rose",id : 2,age : 20},
                    {username : "James",id : 3,age : 20}
                ],
                user : {
                    id : "111",
                    name : "Jack",
                    age : 25
                },
                str : "狂人日记鲁迅",
                counter : 10
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <!-- 遍历对象的属性,会取出属性名和属性值 -->

        <!-- 属性名在后,属性值在前 -->

        <ul>

            <li v-for="value,propName in user">{{propName}}={{value}}</li>

        </ul>

        <!-- 遍历字符串 -->

        <!-- 会取出字符串的每一个字符和下标,字符在前,下标在后 -->

        <ul>

            <li v-for="s,index in str">{{index}}{{s}}</li>

        </ul>

        <!-- 遍历指定的次数怎么操作 -->

        <!-- 左边是次数,右边是下标 -->

        <ul>

            <li v-for="(num,index) of counter">

                {{num}},{{index}}

            </li>

        </ul>

        <h1>{{msg}}</h1>

        <!-- 静态列表 -->

        <ul>

            <li>张三</li>

            <li>李四</li>

            <li>王五</li>

        </ul>

        <!-- 动态列表 -->

        <ul>

            <!-- v-for要写在循环项上 -->

            <li v-for="name in names">{{name}}</li>

        </ul>

        <!-- 用in和of效果是一样的 -->

        <ul>

            <!-- v-for要写在循环项上 -->

            <!-- v-for="变量名,下标 in/of 变量" -->

            <!-- 变量名代表每一个元素 -->

            <li v-for="name,x of names">{{x}}:{{name}}</li>

        </ul>

        <ul>

            <li v-for="vip,index in vips">

                序列号:{{index}}

                会员名:{{vip.username}}

                id:{{vip.id}}

                年龄:{{vip.age}}

            </li>

        </ul>

        <table>

            <tr>

                <th>序列号</th>

                <th>会员名</th>

                <th>id</th>

                <th>年龄</th>

                <th>选择</th>

            </tr>

            <tr v-for="vip,index in vips">

                <td>{{index}}</td>

                <td>{{vip.username}}</td>

                <td>{{vip.id}}</td>

                <td>{{vip.age}}</td>

                <td><input type="checkbox"/></td>

            </tr>

        </table>

    </div>

    <script>

        const vm = new Vue({

            el : "#app",

            data : {

                msg : "Hello",

                names : ["Jack","Rose","James"],

                vips : [

                    {username : "Jack",id : 1,age : 20},

                    {username : "Rose",id : 2,age : 20},

                    {username : "James",id : 3,age : 20}

                ],

                user : {

                    id : "111",

                    name : "Jack",

                    age : 25

                },

                str : "狂人日记鲁迅",

                counter : 10

            }

        });

    </script>

</body>

</html>

旧约Alatus
关注
  • 23
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE 截取字符串的方法
07-30
适合刚刚进入(JavaScript，Vue)编程领域的小白使用
Vue的v-for列表渲染和字符串及指定次数
最新发布
TUTOUXU的博客
02-16 152
【代码】Vue的v-for列表渲染和字符串及指定次数。
vue中怎么获取当前日期
12-06
本内容介绍了“vue中怎么获取当前日期”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 具体步骤如下： 1.首先，在vue-cli中创建一个vue.js项目； vue create project-name 2.vue.js项目创建好后，在项目中使用import方法导入时间...
判断一个字符串中出现次数最多的字符，统计这个次数
bzmdshdn的博客
08-18 50
判断一个字符串中出现次数最多的字符，统计这个次数
VUE 中 v-for 循环固定次数
qq_33478449的博客
05-22 1万+
<p v-for="(item,index) in 10"></p> 这样写可以直接循环10次，item则是从1-10，index则是从0-9；
vue 循环遍历字符串_Vue 循环遍历 v-for
weixin_39725924的博客
12-20 3312
v-for遍历数组渲染一组数据的时候用 v-forv-for的语法类似于JavaScript中的for循环格式如下：item in items的形式我们来看一个简单的案例：如果在遍历的过程中不需要使用索引值v-for="movie in movies"依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie如果在遍历的过程中，我们需要拿到元素在数组...
【vue】vue循环遍历
Meditation_Crazy
11-30 173
前言 转载：https://juejin.cn/post/6844903814030426125
Vue v-for指令
sunling的专栏
01-11 2021
vue学习 {{item.message}} {{parent}}-{{index+1}}-{{mun.no}} var foo = new Vue({ el:'#app1',
vue中v-for控制循环的次数
Tochanges的博客
03-10 1万+
在Vue中的遍历方法v-for控制循环次数的方法可以通过以下两种方法 1.截取循环的数据 <div v-for="(item,index) in array.slice(0, 2)" ></div>//获取array数组中的前两项 像这样可以用数组的slice方法来截取循环的数据长度，从而达到控制循环的次数 2.通过v-if来控制 <div v-for="(...
vue规定v-for循环的次数
junyu1024的博客
12-05 4万+
html:<p v-for="(lab,index) in card.label" v-if='index<=1'></p>控制for 循环的次数为两次
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
10-17
主要介绍了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下
vue实现在v-html的html字符串中绑定事件
10-16
今天小编就为大家分享一篇vue实现在v-html的html字符串中绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue v-for 遍历循环时key值报错的问题
10-18
今天小编就为大家分享一篇解决vue v-for 遍历循环时key值报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用vue中的v-for遍历二维数组的方法
08-27
下面小编就为大家分享一篇使用vue中的v-for遍历二维数组的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中控制v-for循环次数的实现方法
10-17
今天小编就为大家分享一篇Vue中控制v-for循环次数的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
查找字符串中某个字符出现的次数及位置
Paolooo的博客
05-14 2150
<script> // 查找字符串“hjkdsncbasqbqhsqgqjq”中的所有q出现的位置以及次数 // 核心算法：先查找第一个q出现的位置 // 然后 只要indexof 返回的结果不是-1 就继续往后查找 // 因为indexof 只能查找到第一个，所以后面的查找，一定是当前索引加1，然后继续查找 var str = 'hjkdsncbasqbqhsqgqjq'; var index .
vue指令_v-for / 遍历
Henry_ID的博客
07-10 570
vue指令-v-for 语法 v-for="(值, 索引) in 目标结构" v-for=“值 in 目标结构” 目标结构: 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构) 注意: v-for的临时变量名不能用到v-for范围外 例： <template> <!-- v-for="值变量，索引变量 in 目标结构" --> <!-- v-for="值变量 in 目标结构" --> <!-- 可以遍历数组 / 对象 / 数
Vue中控制v-for循环次数的方法
热门推荐
Vegas柠檬的博客
05-22 4万+
在Vue中的遍历方法v-for控制循环次数的方法可以通过以下两种方法1.截取循环的数据    v-for="(item,index) in domainList.slice(0, 2)"    用这样的方法可以截取循环的数据长度，从而控制循环的次数2.通过v-if来控制     v-for="(item,index) in domainList" v-if="index&lt;3"    在标签下...
vue中使用v-for遍历对象的键和值
07-25
在Vue中，可以使用v-for指令来遍历对象的键和值。下面是一个示例： ```vue <template> <div> <div v-for="(value, key) in myObject" :key="key"> {{ key }}: {{ value }} </div> </div> </template> <script> export default { data() { return { myObject: { name: 'John', age: 25, occupation: 'Developer' } }; } }; </script> ``` 在上面的示例中，我们使用v-for指令来遍历`myObject`对象的键和值。在每次迭代中，`key`变量表示当前键，`value`变量表示当前值。我们将它们显示在模板中，并使用`:key`属性来提供一个唯一的标识符。 这样，Vue会自动将对象的键和值遍历并渲染到页面上。 请注意，对象的键在遍历时是无序的，因此在渲染时可能会以不同的顺序显示键和值。如果您需要按特定顺序显示键和值，可以先将对象的键进行排序，然后再进行遍历。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旧约Alatus

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值