<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src="../js/vue.js"></script> <title>Document</title> </head> <body> <div id="root"> <!-- <h1 v-show="false">欢迎{{name}}</h1> --> <!-- <div v-if="false">欢迎{{name}}</div> --> <div>欢迎{{n}}</div> <button @click="n++">点我n+1</button> <!-- <div v-show="n==1">111</div> <div v-show="n==2">222</div> <div v-show="n==3">333</div> --> <!-- v-if最开始使用并且不允许打断 --> <!-- <div v-if="n==1">111</div> <div v-else-if="n==2">222</div> <div v-else-if="n==3">333</div> <div v-else>aaa </div> --> <!-- <h2 v-show="n===1">你好</h2> <h2 v-show="n===1">小白</h2> <h2 v-show="n===1">zjk</h2> --> <!-- teplate与v-if的配合使用 --> <template v-if="n===1"> <h2 >你好</h2> <h2 >小白</h2> <h2 >zjk</h2> </template> </div> <script> const vm=new Vue({ el:"#root", data:{ name:"xiao bai", n:0 } }) </script> </body> </html>
标签:vue,zjk,name,渲染,--,333,111,条件,222 From: https://www.cnblogs.com/xiaobaizitaibai/p/16844462.html