十一、条件渲染
1、条件渲染
- v-if
- 写法：
- v-if=“表达式”
- v-else-if=“表达式”
- v-else=“表达式”
- 适用于：切换频率较低的场景
- 特点：不展示的DOM元素直接被移除
- 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”
- v-show
- 写法：v-show=“表达式”
- 适用于：切换频率较高的场景
- 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
- .备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
- 区别：v-if不满足条件不会渲染，v-show都会渲染只是不满足条件的不展示
2、CODE
DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>条件渲染title><script type="text/javascript" src="../js/vue.js">script>head><body><div id="root">使用v-show做条件渲染<h2 v-show="false">你好，{{name}}h2><h2 v-show="1 === 1">你好，{{name}}h2>使用v-if做条件渲染<h2 v-if="false">你好，{{name}}h2><h2 v-if="1 === 1">你好，{{name}}h2>v-else和v-else-if<h2>当前的n值是:{{n}}h2><button @click="n++">点我n+1button><div v-if="n === 1">n=1div><div v-else-if="n === 2">n=2div><div v-else>n elsediv>v-if与template的配合使用<template v-if="n === 1"><h2>你好h2><h2>{{name}}h2>template>div>body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#root',data:{name: 'Mr.Wang',n: 0}})script>
html>
3、Result
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
