v-

<template>
    <div class="div">
        <p>{{ message }}<p/>
        <p>{{ name }}</p>
<!--        v-bind: 绑定属性-->
        <span v-bind:title="dream">学号vu不是梦</span>
<!--        v-if: 重新创建和删除元素-->
        <p v-if="isNotYang">总是学不会，再聪明一点！</p>
<!--        v-show：不通过dom创建和删除，切换了元素display：none-->
        <p v-show="isNotYang">手中的蔷薇，刺伤而不知觉</p>
        <p>有一天下雪，{{ user }}想去网吧上上网</p>
        <p v-if="age >= 70">{{ user }}爷爷，您还是回家锻炼身体吧！</p>
        <p v-else-if="age >= 18">请{{ user }}愉快上网</p>
        <p v-else>{{ user }}小朋友，你还未成年，要回家好好学习哦！</p>

    </div>
</template>

<script>
    export default {
        name: "app01",
        data(){
            return {
                message: '首次敲vue！',
                name: "物语",
                dream: "小目标",
                // isNotYang: false,
                isNotYang: true,
                user: "林俊杰",
                age: 80,
            }
        }
    }
</script>

<style scoped>

    .div p{
        color: rebeccapurple;
    }

</style>