v-show和v-if

写个小demo如下：

<p>
    <span> input your expression:</span>
    <input type="text" v-model="exprstr"/>
</p>

<p v-if="exprstr!=''">
    <span> input your massage:</span>
    <input type="text" v-model="message" />
</p>

<p v-show="exprstr!=''">
    <span>{{exprstr}}+{{message}}</span>
</p>

v-if 根据后面的表达式，true则渲染到页面，false则不渲染。

v-show则根据后面表达式，相当于做了一个display:hidden，和display:normal的切换。

表达式结果为false的渲染结果如下，可以看到第二段压根就没有渲染到dom，而第3段是有的，只是被隐藏了。

--------------------------------------------------小白空闲的learning小记---------------------------------------------