2021-07-08 vue

vue.js 今日学习总结（一）

几个vue指令的学习：

1. v-band：属性绑定。绑定一个属性，可以达到动态改变的目的。比如：多处用到同一张图片，当你需要改动时，如果用v-band绑定scr属性，就可以达到改动一处，全局改动的效果。 【v-band 的缩写是 冒号“ ：”】
2. v-if 、v-show：用于条件隐藏。区别：v-if通过 控制标签的存在与否来控制元素显隐，标签的去除对电脑损耗大；v-show只是通过把标签注释掉达到隐藏效果。 基于以上区别，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

今天的实操：实现图片切换，并设置两个按钮“上一张”、“下一张”，在切换至第一张时，“上一张”按钮隐藏，切换至最后一张时，“下一张”按钮隐藏

  思路：首先，对scr进行v-band绑定，将图片放入一个数组中，data域设置一个值，初始化为0，用于控制数组下标，便于图片切换 ；
  然后，说说图片切换时如何实现的吧，就是在button属性中绑定一个单击事件，用函数实现数组下标的加减，使得点击不同按钮时可以呈现不同图片；
  最后，是按钮的隐藏，用v-show指令 附上代码：("上一张")v-show:“index.num!=0” （“下一张”）v-show:“index.num!=index.picture.length-1”
  比起用“if-else”方便些。

补充一点昨天的知识

• v-text 设置标签的文本值，把标签里面所有的内容全部替换，简写是双大括号{{}}
• v-on 可以给标签绑定事件（单击（click）、双击（dblclick）等等）来通过方法（methods中的各种“函数”）来改变数据简写是 @
• v-html 当内容是简单的文本时，与v-text作用相同。但是当内容是HTML格式的时候，可以通过html解析方式来解析文本

嘿嘿，今天就先这样吧 ^ ^