谷粒商城vue学习2

vue

1、样式绑定v-bind:class

• class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
• Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

2、双向绑定v-model

• v-bind只能从model到view。v-model能从view到model

3、v-on事件

• v-on:事件类型="方法" ，可以简写成@事件类型="方法"

4、事件冒泡

• 大小div都有单机事件，点了内部div相当于外部div也点击到了。
• 如果不想点击内部div冒泡到外部div，可以使用.prevent阻止事件冒泡 用法是v-on:事件类型.事件修饰符="方法" 还可以绑定按键修饰符 v-on:keyup.up=“num+=2” @keyup.down=“num-=2” @click.ctrl=“num=10”

5、v-for遍历

• 可以遍历 数组[] 字典{} 。对于字典

6、v-if和v-show

• 在vue实例的data指定一个bool变量，然后v-show赋值即可。
  show里的字符串也可以比较
  if是根据表达式的真假，切换元素的显示和隐藏（操作dom元素）
• 区别：show的标签F12一直都在，if的标签会移除， if操作dom树对性能消耗大

7、v-else和v-else-if

• 判断语句，满足情况则输出；

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名,转载请标明出处
最后编辑时间为: 2023/06/25 09:05