如何使用Vue.js获取奇数和偶数并进行分类展示

 时间:2024-10-13 21:03:37

1、第一步,双击打开HBuilder工具,新建Web项目并在项目指定目录下创建页面,如下图所示:

如何使用Vue.js获取奇数和偶数并进行分类展示

2、第二步,在<title></title>标签下方,引入Vue.js核心的JavaScript文件,如下图所示:

如何使用Vue.js获取奇数和偶数并进行分类展示

3、第三步,在<body></body>标签内,插入一个无序列表,列表有两个子项,分别使用v-for指令绑定数据,如下图所示:

如何使用Vue.js获取奇数和偶数并进行分类展示

4、第四步,在<ul></ul>标签下方,插入<script></script>,并在这个标签内编写data和判断奇数和偶数的方法函数,如下图所示:

如何使用Vue.js获取奇数和偶数并进行分类展示

5、第五步,保存代码并预览界面,这时打开浏览器控制台,发现报错了,如下图所示:

如何使用Vue.js获取奇数和偶数并进行分类展示

6、第六步,将v-for指令中的num改为digits,然后再次保存预览页面,可以看到效果,如下图所示:

如何使用Vue.js获取奇数和偶数并进行分类展示
  • css如何让span元素带边框
  • phpstudy运行mysql时出现1055怎么办
  • FrontPage技巧:[15]如何在网页中制作表格框架
  • 如何利用HTML5和CSS3制作图片列表并展示效果
  • Dreamweaver如何将Git存储库与站点关联
  • 热门搜索
    高一生物知识点总结 黄瓜汁的功效与作用 猫的尾巴有什么作用 学制填什么 地质作用 压敏电阻的作用 飞盘运动 知识手抄报 白矾的作用 卡卡西为什么杀琳