vue-v-if指令

• 主要职责就是当表达式值改动时，相应的将某些行为应用到DOM上，以v-if为例
  v-if指条件性渲染，为true时渲染DOM，否则不进行渲染；
• 作用与v-show相同，本质是通过操纵dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，相反则移除。

<div id="app">
        <div v-if="isCreated">动态创建和删除</div>
    </div>

<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isCreated:true,   //创建  false删除
            },
        })

可在控制台控制节点的添加和删除：

app.isCreated
true
app.isCreated=false
false

更多应用：
通过按钮切换显示状态

<div id="app">
        <!--
            作用与v-show相同
            本质是通过操纵dom元素来切换显示状态
            表达式的值为true，元素存在于dom树中，相反则移除
        -->
        <input type="button" value="切换显示" @click="toggleIsShow">
        <!--一个样式一个dom-->
        <p v-if="isShow">Tiramisu</p>
        <p v-show="isShow">Tiramisu v-show</p>
        <h2 v-if="temperature>=35">热死了</h2>
    </div>

<!--  开发环境版本，包含了有帮助的命令警告-->
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
               isShow:false,
               temperature:40
            },
            methods:{
                toggleIsShow:function(){
                    this.isShow=!this.isShow;
                }
            }
        })
    </script>