alpineJS的 x-for循环实例_米醋屋个人技术博客

今天演示一下我们的alpineJS的 x-for循环实例，使用比较简单，但是也有一些需要注意的点。

1：数据data赋值需要在前

2：循环 item 属性的时候，需要在最外层包 根节点（如 div）。

下面是简单地实例代码：

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine演示效果</title>
    <script src="./js/alpine.min.js"></script>
</head>

<body>
    <script>
        function myFun(){
            return{
                "data":{
                    "title":"你好，汉语"
                },

"items":[
                    {"name":"zhangsan","age":18},
                    {"name":"lisi","age":18},
                    {"name":"wangwu","age":18},
                ]
                    
                
            }
        }
    </script>

<h2>biyadi</h2>

</body>

</html>
```

注:原创不易,转载请注明出处( https://micuu.com/new/3092.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

alpineJS的 x-for循环实例

留言反馈