按照操作步骤输出学生信息 (1)新建站点student_demo,并新建网页stu_info.html (2)在vue.js官网( http://cn.vuejs.org/ )下载vue.js文件保存至js文件夹,引入到网页stu_info.html (3)下载bootstrap4框架,引入到网页stu_info.html (4)创建Vue实例 (5)在Vue实例中设置学生数据data stu_list: [ {stu_num: 1810101, name: '',age: 19, sex: 1}, {stu_num: 1810102, name: '二二',age: 20, sex: 0}, {stu_num: 1810103, name: '马三三',age: 20, sex: 1} ] (6)在表格中输出三个学生信息,利用三目运算符输出学生性别(sex=0为女生,1为男生),并计算年龄总和,其中html结构如下:
|
姓名 |
年龄 |
性别 |
第一个学生 |
第一个学生姓名 |
第一个学生年龄 |
三目运算符渲染第一个学生性别 |
第二个学生 |
第二个学生姓名 |
第二个学生年龄 |
三目运算符渲染第二个学生性别 |
第三个学生 |
第三个学生姓名 |
第三个学生年龄 |
三目运算符渲染第三个学生性别 |
年龄总和:计算三个学生年龄总和 |