<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 这是压根就没有渲染,不是css隐藏 -->
        <button @click="addValue()">按下修改图片</button>
        <h1>{{value}}</h1>
        <img v-if="value % 2 === 0" height="100px" src="../Pic/1.png">
        <!-- 为了提高效率,可以使用v-else -->
        <!-- <img v-if="value % 2 != 0" height="100px" src="../Pic/2.png"> -->
        <!-- 这样效率高的多,不用再次运算一遍了 -->
        <img v-else height="100px" src="../Pic/2.png">
        <br>
        <input type="number" v-model="temp"/>
        <h1>{{warn}}</h1>
        <br>
        <h1 v-if="temp <= 10">寒冷</h1>
        <h1 v-if="temp > 10 && temp <= 25">凉爽</h1>
        <h1 v-if="temp > 25">炎热</h1>
        <!-- 简写方法,但是这样写,中间不能断开 -->
        <h1 v-if="temp <= 10">寒冷</h1>
        <h1 v-else-if="temp <= 25">凉爽</h1>
        <h1 v-else>炎热</h1>
        <!-- v-show指令是通过css样式的display属性来实现显示和隐藏的 -->
        <!-- v-if是直接不渲染 -->
        <!-- 如果一个元素频繁的要进行显示隐藏之间的修改,就用v-show -->
        <!-- 因为v-if要重新渲染出来 -->
        <!-- v-if的优点是,页面加载速度快,提高了渲染效率 -->
        <div v-show="true">你可以看到我吗?</div>
        <!-- 使用template而不是div就可以做到既把这三个子元素包裹 -->
        <!-- 又不破坏原有页面结构的效果 -->
        <!-- template元素只是起到占位的作用,不会真正出现在页面上也不会影响页面的结构 -->
        <template v-if="value === 10">
            <input type="text"/>
            <input type="checkbox"/>
            <input type="radio"/>
        </template>
        
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                value : 1,
                temp : 0,
                warn : ""
            },
            methods : {
                addValue()
                {
                    this.value++;
                }
            },
            watch : {
                temp : {
                    immediate : true,
                    deep : true,
                    handler(newValue,oldValue)
                    {
                        if(newValue <= 10)
                        {
                            this.warn = "寒冷";
                        }
                        else if(newValue <= 25 && newValue > 10)
                        {
                            this.warn = "凉爽";
                        }
                        else if(newValue > 25)
                        {
                            this.warn = "炎热";
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>