八、内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：
- v-text（类似innerText）
- 使用语法：
<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中 - 类似 innerText，使用该语法，会覆盖 p 标签原有内容
- v-html（类似 innerHTML）
- 使用语法：
<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中 - 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。
代码演示：
<div id="app"> <h2>个人信息</h2> // 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可 <p v-text="uname">姓名：</p> <p v-html="intro">简介：</p> </div> <script> const app = new Vue({ el:'#app', data:{ uname:'张三', intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>' } }) </script>
九、条件渲染指令
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
- v-show
- 作用： 控制元素显示隐藏
- 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
- 原理： 切换 display:none 控制显示隐藏
- 场景：频繁切换显示隐藏的场景
示例代码：
<div id="app"> <div class="box">我是v-show控制的盒子</div> <div class="box">我是v-if控制的盒子</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { flag: false } }) </script> 1. v-else 和 v-else-if
- 作用：辅助v-if进行判断渲染
- 语法：v-else v-else-if="表达式"
- 需要紧接着v-if使用
示例代码：
<div id="app"> <p>性别：♂ 男</p> <p>性别：♀ 女</p> <hr> <p>成绩评定A：奖励电脑一台</p> <p>成绩评定B：奖励周末郊游</p> <p>成绩评定C：奖励零食礼包</p> <p>成绩评定D：惩罚一周不能玩手机</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { gender: 2, score: 95 } }) </script>
十、事件绑定指令
使用Vue时，如需为DOM注册事件，及其的简单，语法如下：
- <button v-on:事件名="内联语句">按钮</button>
- <button v-on:事件名="处理函数">按钮</button>
- <button v-on:事件名="处理函数(实参)">按钮</button>
v-on:简写为 @
- 内联语句
<div id="app"> <button @click="count--">-</button> <span>{{ count }}</span> <button v-on:click="count++">+</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { count: 100 } }) </script>
- 事件处理函数注意：
- 事件处理函数应该写到一个跟data同级的配置项（methods）中
- methods中的函数内部的this都指向Vue实例
<div id="app"> <button>切换显示隐藏</button> <h1 v-show="isShow">黑马程序员</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { isShow: true } }) </script>
3.给事件处理函数传参
- 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
- 如果传递了参数，则实参
$event表示事件对象，固定用法。
<style> .box { border: 3px solid #000000; border-radius: 10px; padding: 20px; margin: 20px; width: 200px; } h3 { margin: 10px 0 20px 0; } p { margin: 20px; } </style> <div id="app"> <div class="box"> <h3>小黑自动售货机</h3> <button>可乐5元</button> <button>咖啡10元</button> <button>牛奶8元</button> </div> <p>银行卡余额：{{ money }}元</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { money: 100 } }) </script>
