<!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>
    </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>