html+CSS+js部分基础运用16

通过过滤器实现全部大写，首字母大写，效果如下图1所示： 图1 过滤器应用 通过v-if指令实现下面的效果： 通过按钮控制flag参数变化输出不同的语句，同时影响模板内容的呈现。 通过条件渲染指令判定成绩等级的输出结果   图2 条件渲染应用 Key管理可复用的元素 图3 key复用元素应用 v-for的综合应用。 遍历数组 遍历数字 遍历对象 遍历普通数组 遍历绑定key对象的数组，新添加的插入数组起始位置                        图4 v-for的综合应用 自定义指令，全局注册与局部注册。 全局注册定义一个指令聚焦到文本框，局部注册定义一个指令随机改变元素的背景颜色。                图5 自定义指定效果图 6、设计一个简易的图书管理页面，页面效果如下图6所示： 当图书的四个信息均不为空的时候，点击添加按钮可以把相关图书信息添加到数据表最后一行。                      图6 图书管理

通过过滤器实现全部大写，首字母大写 Filter1将数组的元素全部变成大写，然后返回值给msg Filter2将第一个元素变成大写，然后返回值给msg filters:{                 filter1:function(val){                     return val.toUpperCase();                 },                 filter2:function(val){                     return val.charAt(0).toUpperCase()+val.slice(1);                 }             } 通过v-if指令实现下面的效果 v-if先判断flag是否为true，是，则输出我闪亮当场；否，则输出我隐藏模板；当为true时，模板内容输出 Key管理可复用的元素 判断login1和login2的值是什么，根据值切换模板，点击切换登录方式，调用changeLogin()方法，修改login1和login2的值 v-for的综合应用 点击按钮后添加学生信息到数组中，然后通过v-for将名单逐个输出 <button type="button" v-on:click="addStudent">添加学生名单</button>                 <p v-for="user in students" v-bind:key='user.id'><input type="checkbox" >{{user.id}}--{{user.name}}</p> 自定义指令，全局注册与局部注册 前者为全局变量，后者为局部变量 设计一个简易的图书管理页面 在tr里使用v-for将数组的信息全部输出，每个td里面存放书籍的相关信息，使用id作为唯一标识 调用push()方法将信息添加到数组的末端

通过过滤器实现全部大写，首字母大写                             图一 通过v-if指令实现下面的效果                             图二 Key管理可复用的元素                              图三 v-for的综合应用                               图四 自定义指令，全局注册与局部注册                               图五 设计一个简易的图书管理页面                              图六

通过本次实验，我基本了解javascript和vue的基本知识。并清晰了JavaScript使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互的表达能力。从而基于CGI静态的HTML、页面将被可提供动态实时信息并可监视信息变化。