V-for渲染字符串，对象，数组，数字

最新推荐文章于 2023-11-29 16:04:24 发布

✾℡南风未恋̶̶ღ̶̶

最新推荐文章于 2023-11-29 16:04:24 发布

阅读量156

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_61990666/article/details/133821363

版权

v-for写在循环项上，v-for的语法是v-for=“变量名，变量名 of/in 数组等”，v-for执行一定要引入vm实例，无论是直接写数组等还是data当中的属性，变量都可以插值语法，在HTML内，直接写字符都是常量，要插值语法才是变量。v-for中对象是可以有三个变量的，数组是两个，多的没有定义。

<!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 (1).js"></script>
</head>
<body>
    <ul id="app">
        <li v-for="a,b in msg">
            {{a.name}} {{b}}
        </li>
        <li v-for="a,b in {a:1,b:2}">
            {{a +'='+b}}
        </li>
        
        <li v-for="a,b in 'sad'">
            {{a}}
        </li>
        <li v-for="a,b in 10">
            {{a}}
        </li>
    </ul>
    <script>
        //对象数组可以写a,b in[1,2,3]，但是一定要有app，vue实例过来
      const vm= new Vue({
      data:{
        //a,b in'sad'也可以用
        a1:'sad',
       //msg:['1jac','2','2'],
       //取对象
       msg:[
        {id:1,name:'jack'},
        {id:2,name:'mary'}
       ],
       //一定是jsdn
       msg1:{
        name:'jack',
        age:18
       }
       } ,
      el:'#app'
      
       })

    </script>
    
</body>
</html>