0%

计数器方法,按钮的v-on:click(=@)点击事件,加减函数对span内容进行修改

- +

这是分割线

v-show条件显示,根据表达式布尔值

看不见我

切换 那年 ,母校舞会,站着如喽啰

这是分割线

v-if表面效果与v-show没区别,实际上v-show只是操作了元素的display属性,而v-if将元素从dom树移除,需要频繁切换时用v-show
v-if支持if-else形式比如这个-分数评级

优秀

良好

中等

及格

哦豁


这是分割线

v-bind指令(简写为:)动态切换元素属性:src,title,class...

这是一个黄方块
更改边框

这是分割线

图片切换,将图片url放入一个数组,通过动态修改img标签的src属性实现切换图片 ,给button绑定事件修改数组索引值来上/下一张
加入了轮播效果,Vue的mounted属性里放置计时器

当前第一张 当前最后一张
上一张 下一张

这是分割线

v-for指令,遍历输出数组信息(item in items/item,index in items),((item.属性名))或输出对象信息(value,key in item),((item.key)):((item.value))
双大括号无法显示用双小括号表示

用了input标签ref属性,在方法中用this.$refs.refname.value获取输入的值,用push/pop来增/删最后一个


添加 删除

这是分割线

v-on绑定事件click传入参数,keyup事件enter修饰符。。。

按钮

按回车

这是分割线

v-model双向数据绑定,输入框和文本内容

修改文本

这是分割线