Vue05--v-if、v=show、filters(过滤器)

v-if v-else-if v-else

条件判断。当其为true是会渲染数据和显示dom元素。否则不会显示。

<div v-if="fSize==10">显示true</div>
  <div v-else-if="fSize<10">显示else </div>
  <div v-else>显示false</div>

文本框中的字符串并没有随着true与false的切换来清空文本框

<div v-if="isShow">
    <div>账号</div>
    <input name="user" placeholder="请输入账号">
  </div>
  <div v-else>
    <div>邮箱</div>
    <input key="a"  name="email" placeholder="请输入邮箱">
  </div>
  <button @click.stop="switchShow">切换</button>

这是因为vue的对DOM进行渲染时会尽可能的去复用元素，而不是去创建新的元素
如果不希望vue去重复使用元素则添加key并保证key不同

v-show 是否显示

其雷同与v-if，true 显示 false不显示
区别：v-show=“false” 会给DOM元素增加样式 display:node。v-if="false"则是不会存在DOM元素

test

filters 过滤器

与methods 同级，写法相同。
参数+|+过滤器中定义的方法

 <td>{{item.price|myPrice}}</td>
filters:{
      myPrice(price){
          return  '$'+price.toFixed(2);
      }
    }