VUE02

(3). v-if和v-else:

a. 什么是: 专门根据一个条件控制两个元素二选一显示
b. 何时: 今后只要两个元素二选一显示时，都用v-if和v-else
c. 如何: 
<元素1 v-if="bool变量或js条件表达式">
<元素2 v-else>
d. 强调: v-if和v-else两个元素必须紧挨着写！中间不能插入任何其它内容！
e. 原理: new Vue()扫描到v-if和v-else这里时，会自动计算变量值或条件表达式的结果。
    1). 如果v-if中的条件表达式计算结果为true，则保留v-if所在的元素，删除v-else所在的元素
    2). 如果v-if中的条件表达式计算结果为false，则删除v-if所在元素，保留v-else所在元素
f. 高频笔试题: v-show和v-if都能控制元素显示隐藏，差别: 
    1). v-show是通过display:none来控制显示隐藏
    2). v-if是通过删除元素来控制显示隐藏
g. 示例: 根据用户的登录状态，显示不同的内容

4_v-if_v-else.html

    





 

 

 Document

 





 

 

 

 

 

 Welcome dingding | 注销

 

 

 

 登录 | 注册

运行结果：

(4). v-else-if

a. 什么是: 专门和v-if和v-else配合来控制多个元素多选一显示

b. 何时: 只要多个元素多选一显示时

c. 如何:

<元素1 v-if="条件1">

<元素2 v-else-if="条件2">

... ...

<元素n v-else>

d. 强调: v-if v-else-if v-else的几个元素必须紧挨着写，中间不能插入其他内容。

e. 原理:

1). 当new Vue()扫描到v-if时，先计算v-if后的变量或条件表达式，如果v-if后的条件为true，则保留v-if删除其它v-else-if和v-else

2). 如果v-if的条件为false，则继续向后扫描每个v-else-if。只要任意一个v-else-if后的条件为true，则删除除该v-else-if之外的其余兄弟元素，只显示当前v-else-if的元素.

3). 如果所有v-if和v-else-if的条件都为false，则删除所有v-if和v-else-if的元素，仅保留v-else所在元素显示。

f. 示例: 根据pm25数值选择一张图片显示

5_v-else-if.html




  
  
  Document

Document {{i+1}} - {{ename}}

Document {{key}} : {{value}}

Document {{i}}

Document 成亮李然

1). <元素 @事件名="事件处理函数"> //强调: 只获得事件对象e时，不要加() //一旦HTML中加了()，就不再自动传事件对象e了 methods:{ // event // ↓ 事件处理函数(e){ ... } } 2). 示例: 点div哪个位置，就喊哪个位置疼

Document 成亮李然

Document 用户名: {{uname}}

小程序->在线->VUE->day01 3. 绑定语法 {{}} v-bind ...v-show...v-if... 4. v-for 遍历数组 ... 小程序->在线->VUE->day02 1. 事件绑定 v-on @... 2. 其它指令绑定HTML内容防止用户短暂看到{{}}

VUE02

4_v-if_v-else.html

Welcome dingding | 注销

登录 | 注册

(5). v-for

6_v-for.html

7_v-for_obj.html

8_v-for_n.html

9_v-on.html

10_v-on_e.html

1). 错误做法:

2). 正确做法:

11_v-on_$event.html

(7). 防止用户短暂看到{{}}

iv. 原理:

2). v-text:

12_v-cloak_v-text.html

用户名: {{uname}}

总结

总结:

总结:

你可能感兴趣的:(javascript)