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

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:none。v-if="false"则是不会存在DOM元素

filters 过滤器

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

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

v-model 表单绑定：数据的双向绑定
表单元素与数据。当其中一个发生变化，另外一个也会发生变化。
例如使用input时。输入框内容会传递给msg，msg会发生变换。等msg发生变化时也会传递给DOM,DOM也会发生响应的改变。

   <input v-model="msg">{{msg}}

v-model 绑定单选框

<input type="radio" id="male" name="sex" value="男"  v-model="sex">男
  <input type="radio" id="female" name="sex" value="女"  v-model="sex">女
  data:
        sex:"男",

v-model 绑定多选框

 <input type="checkbox" v-model="isAgree" value="agree">同意
 data
 isAgree:false,

<input type="checkbox" v-model="books" value="java">java
  <input type="checkbox" v-model="books" value="js">js
  <input type="checkbox" v-model="books" value="vue">vue
  <input type="checkbox" v-model="books" value="c">c
  books:[
      ]

v-model 下拉选择框

  <select name="asd" v-model="fruit">
    <option value="apple">apple</option>
      <option value="pear">pear</option>
        <option value="bannana">bannana</option>
  </select>
  data
    fruit:"apple",

<select name="asd" v-model="fruits" multiple>
    <option value="apple">apple</option>
      <option value="pear">pear</option>
        <option value="bannana">bannana</option>
  </select>
  data
    fruits:[]

v-model 修饰符：
默认情况input与数据是双向同步的。
.lazy:当是去焦点或者是回车后才会去同步

默认情况input的中数据都会边都会变成字符串类型
.number:会将内容转为数字类型

trim:去除内容两边的空格