master

分支 (1)

管理

管理

master

Vue.js_study
/
v_on_click.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>
<body>

<div id="root">
    <!-- v-on:绑定事件-->
    <div v-on:click="handleClick">
        {{content}}
    </div>
    <!-- v-on简写@-->
    <!--    <div @click="handleClick">-->
    <!--        {{content}}-->
    <!--    </div>-->
</div>

<script>

    new Vue({
        el: "#root",
        data: {
            content: "hello"
        },
        methods: {
            handleClick: function () {
                // alert(123)
                //改变页面显示的时候，只需要改变数据的值即可
                // this.content = "world"
                if (this.content === "world") {
                    this.content = "hello"
                } else {
                    this.content = "world"
                }
            }
        }
    })
</script>

</body>
</html>