Vue 条件渲染

Posted 2020-12-30 zhx119

vue 条件渲染，v-if ,v-show;这两个的值是true时候，dom中的元素都会渲染出来，当值为false的时候，if渲染的元素不会在dom中出现，show渲染的dom元素是style:display:none;两者有这样的区别，同时v-if else 两者使用的时候中间不能有其他的元素，否则会失效，例如在两个div中，一个div是v-if,另一个是else,在这两个div中都有input标签，当input标签发生change实际的时候，v-if的值由false变成true,如下面的例子：在这里邮箱显示的，当发生chang事件时候即方法hanleFinish执行，改变show的值，这里input必须加key值，值可以自定义，不然在邮箱里输入的值会在用户名的input上显示出来。

<div v-if="show">
 用户名： <input type="text" key="one">
</div>
<div v-else>
  邮箱名: <input type="text" @change="hanleFinish" key="two">
</div>

<script>
  export default {
    props: [‘list‘],
    data ()
    {
     return {
        show:false,
      }，

methods: {
  hanleFinish(){
    this.show = true;
  }
},   }

</script>