v-if.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 22">Age: {{ age }}</h1>
            <h1 v-if="borth >=19950117">borth: {{ borth }}</h1>
            <h1 v-if="name.indexOf('汪如祥努力！') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 22,
                borth: 19950117,
                name: '汪如祥加油！'
            }
        })
    </script>
    <!--
    	这段代码使用了4个表达式：

		数据的yes属性为true，所以"Yes!"会被输出；
		数据的no属性为false，所以"No!"不会被输出；
		运算式age >= 22返回true，所以"Age: 22"会被输出；
		运算式name.indexOf('汪如祥努力！') >= 0返回false，所以"Name: 汪如祥加油！"不会被输出。
		注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。
    -->
</html>