Vue指令 (1)
控制元素的隐藏
v-show
1. 语法结构`v-show="表达式"`表达式中结果为true隐藏；为false时显示
- 本质原理：通过切换
css的display：none来控制隐藏，适合于频发切换显示隐藏的场景 - 场景示例：鼠标悬停在小米官网中购物车时页面的响应效果
v-if
1. 语法结构`v-if="表达式"`表达式中结果为true隐藏；为false时显示
- 本质原理：根据判断条件来控制是否创建或移除元素节点（条件渲染），适用于要么显示，要么隐藏的不频繁切换的场景
- 场景实例：京东官网的”你好，请登录“内容，只展示给未登录账户，对于已登录账户则隐藏
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>v-show与v-if的使用</title></head><body><div id="app"><p v-show="show">{{message}}</p><p v-if="show">{{message}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script><script>newVue({el:'#app',data:{message:'hello world',show:false}})</script></body></html>辅助v-if进行判断渲染
> 适用于多内容的条件判断，需要紧挨着`v-if`进行使用 >v-else
语法结构：后面不需要跟任何的表达式，直接表示”否则...成立“v-else-if
语法结构：`v-else-if="判断表达式"`若判断结果为true则结果渲染，表示该条件下的结果成立；反之判断结果为false
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>v-else和v-else-if的使用</title></head><body><div id="app"><p v-if="score >= 90">优秀</p><p v-else-if="score >= 80">良好</p><p v-else-if="score >= 70">中等</p><p v-else-if="score >= 60">及格</p><p v-else>不及格</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script><script>newVue({el:'#app',data:{score:85}})</script></body></html>注册事件
> 添加事件的监听（内联语句）与提供事件的处理逻辑（函数名） >v-on
1. 语法结构` v-on：事件名="内联语句"`` v-on：事件名="methods中的函数名"`内联语句：可执行的代码
- 简写：为了便于开发者的操作，通常将其简写为
@事件名
例如点击按钮事件**v-on:click**简写为**@click**
- 注意点：内联语句是可以直接使用变量的；而在methods中的函数是需要通过实例对象来访问的，一般通过
this.变量名来进行引用访问
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>v-on的使用</title></head><body><div id="app"><button@click="show">切换显示隐藏</button><p v-show="isshow">这是一段显示的文本</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>newVue({el:'#app',data:{//提供数据isshow:false},methods:{// 事件处理函数show(){//this 指向当前实例对象，无论实例名是否发生改变，引用变量时都不需要改变console.log('点击了按钮',this.isshow)// 切换isshow的值,实现反复点击this.isshow=!this.isshow}}})</script></body></html>