问答详情
源自:2-3 Vue实例中的数据,事件和方法

写的脚本没有触发click事件,麻烦老师和各位同学帮忙分析一下

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>VUE绑定事件处理</title>

        <script src="vue.js"></script> 

        

    </head>

    <body>

        <!--vue实例的挂载点(el属性来实现挂载) {{}}插值表达式-->

        <div id="root">  

            <!--<div @click="handleClick">{{msg}}</div>-->

            <div v-on:click="handleClick">{{texts}}</div>

        </div>


        <script>

            //vue实例

            new Vue({

                el: "#root",

                //模板,挂载点内的内容

                template: "<h1>{{texts}}</h1>",

                data: {

                    texts: "hello world"

                },

                methods: {

                    handleClick: function() {

                        this.texts = "vue单击事件绑定响应更新数据"

                    }


                }

            })

        </script>


    </body>

</html>


提问者:慕丝5208578 2020-08-19 09:22

个回答

  • 慕无忌3165165
    2020-08-19 15:05:23
    已采纳

    去掉  template: "<h1>{{texts}}</h1>"

  • 慕丝5208578
    2020-08-20 09:07:09

    是的去掉template: "<h1>{{texts}}</h1>"就好了,把这块给忘掉去掉了,谢谢

  • 慕无忌3165165
    2020-08-19 15:14:08

    或者 template: "<h1 @click='handleClick'>{{texts}}</h1>",把<div v-on:click="handleClick">{{texts}}</div>中的v-on:click="handleClick"去掉