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

1. 通过过滤器实现全部大写，首字母大写，效果如下图1所示：
2. 

图1 过滤器应用

1. 通过v-if指令实现下面的效果：

1. 通过按钮控制flag参数变化输出不同的语句，同时影响模板内容的呈现。
2. 通过条件渲染指令判定成绩等级的输出结果

图2 条件渲染应用

1. Key管理可复用的元素

图3 key复用元素应用

1. v-for的综合应用。
   1. 遍历数组
   2. 遍历数字
   3. 遍历对象
   4. 遍历普通数组
   5. 遍历绑定key对象的数组，新添加的插入数组起始位置
   6. 

                       图4 v-for的综合应用

1. 自定义指令，全局注册与局部注册。

全局注册定义一个指令聚焦到文本框，局部注册定义一个指令随机改变元素的背景颜色。

               图5 自定义指定效果图

6、设计一个简易的图书管理页面，页面效果如下图6所示：

1. 1. 当图书的四个信息均不为空的时候，点击添加按钮可以把相关图书信息添加到数据表最后一行。
   2. 

                     图6 图书管理

1. 通过过滤器实现全部大写，首字母大写

Filter1将数组的元素全部变成大写，然后返回值给msg

Filter2将第一个元素变成大写，然后返回值给msg

filters:{

                filter1:function(val){

                    return val.toUpperCase();

                },

                filter2:function(val){

                    return val.charAt(0).toUpperCase()+val.slice(1);

                }

            }

1. 通过v-if指令实现下面的效果

v-if先判断flag是否为true，是，则输出我闪亮当场；否，则输出我隐藏模板；当为true时，模板内容输出

1. Key管理可复用的元素

判断login1和login2的值是什么，根据值切换模板，点击切换登录方式，调用changeLogin()方法，修改login1和login2的值

1. 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>

1. 自定义指令，全局注册与局部注册

前者为全局变量，后者为局部变量

1. 设计一个简易的图书管理页面

在tr里使用v-for将数组的信息全部输出，每个td里面存放书籍的相关信息，使用id作为唯一标识

调用push()方法将信息添加到数组的末端

1. 通过过滤器实现全部大写，首字母大写

                            图一

1. 通过v-if指令实现下面的效果

                            图二

1. Key管理可复用的元素

                             图三

1. v-for的综合应用

                              图四

1. 自定义指令，全局注册与局部注册

                              图五

1. 设计一个简易的图书管理页面

                             图六

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