搜索到
1
篇与
的结果
-
条件渲染 1. v-if语法：v-if="表达式" v-else-if="表达式" v-else适用于：切换频率较低的场景特点：不展示的DOM元素直接被移除注：v-if可以和v-else-if、v-else一起使用，但要求结构完整，不能被中间打断2. v-show语法：v-show="表达式"适用于：切换频率较高的场景特点：不展示的DOM元素不会被移除，仅仅是使用样式隐藏<!DOCTYPE html> <html lang="en"> <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 === 3">你好，{{name}}</h2> --> <!-- 使用v-if作条件渲染 --> <h2 v-if="false">你好，{{name}}</h2> <h2 v-if="1 === 1">你好，{{name}}</h2> <h2>当前的n值是：{{n}}</h2> <button @click="n++">点我n+1</button> <!-- v-else和v-else-if --> <div v-if="n === 1">Angular</div> <div v-else-if="n === 2">React</div> <div v-else-if="n === 3">Vue</div> <div v-else>测试</div> <template v-if="n === 1"> <h2>孙笑川</h2> <h2>刘波</h2> <h2>Giao哥</h2> </template> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { name: '孙笑川', n: 0 } }) </script> </body> </html>
