初识Vue 3.0 —— v-if/v-else/v-else-if/v-show条件渲染

原创

陈小知 2022-09-14 17:03:34 ©著作权

文章标签 vue html python javascript js 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者陈小知的原创作品，请联系作者获取转载授权，否则将追究法律责任

<h5>18.条件渲染</h5>
<div>
  <p><div v-if="awesome"> </div></p>
  <pre>v-if/v-else/v-else-if </pre>
  <div id="vif">
    <select name="" v-model="types">
<option value="a">a</option><option value="b">b</option><option value="c">c</option>
    </select>
    <h1 v-if="types == 'a'">这里是H1</h1><h2 v-if="types == 'b'">这里是H2</h2><h3 v-if="types == 'c'">这里是H3</h3>
  </div>
  <script type="text/javascript">
    //条件渲染 v-if/v-else/v-else-if
    const vif = {
data(){
  return{
    types:'a'
  }
}
    }
    Vue.createApp(vif).mount("#vif");
  </script>
  <pre>v-show</pre>
  <div id="vshow">
    <button @click="toggleShow">点击切换flag</button>
    <h3 v-show="ok">显示出来了</h3>
  </div>
  <pre>注意：v-if是真的渲染和销毁了；v-show只是css控制的显示隐藏，html还在</pre>
  <script type="text/javascript">
    //v-show
  const showbox = {
    data(){
return{
  ok:true
}
    },
    methods:{
toggleShow:function(){
  this.ok = !this.ok;
}
    }
  }
  Vue.createApp(showbox).mount("#vshow");
  </script>
</div>