<html> <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>Vue</title> <script src="https://www.hxstrive.com/cdn/libs/vue/2.7.16/vue.min.js"></script> </head> <body> <div id="app"> <!-- 外层 v-if 用来判断 users 是否为空和有值,没有值则不循环 --> <ul v-if="users != null && users.length > 0"> <!-- 内层 v-if 用来判断只显示激活的用户 --> <li v-for="user of users" :key="user.id" v-if="user.active"> {{ user.id }} - {{ user.name }} </li> </ul> <div v-else>Not User</div> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { users: [ { id:100, name:"Bill", active: true }, { id:200, name:"Helen", active: false }, { id:300, name:"Tom", active: true } ] } }); </script> </body> </html>
在线代码编辑器
HTML / CSS / JavaScript 实时预览
更多工具
运行
保存
自动执行
模板
JS 库
清空
主题
代码编辑区
字符数: 0
提示: 输入完整的 HTML 代码,需包含 DOCTYPE 声明与 html 根标签
预览效果
选择模板
取消
选择库和版本
库
版本
文件
取消
已复制到剪贴板