@click 事件在 vue.js 应用程序中不起作用

Question

I need to change the {{message}} on the click of a button with a alert box.我需要单击带有警报框的按钮来更改 {{message}}。 No alert box is showing and the message is also not changing.没有显示警告框，消息也没有改变。
I am new to vue world, the other examples are working but there is a problem with this file only.我是 vue 世界的新手，其他示例都在工作，但只有这个文件有问题。
I have used the directive "v-once" on the message tag inside the <h1> tag, the <h2> doesn't have "v-once".我在<h1>标签内的消息标签上使用了指令“v-once”， <h2>没有“v-once”。
Please reply me what I have done wrong in the code below.请回复我在下面的代码中我做错了什么。

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vue.js Tutorial | Directives</title>

          <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      </head>

      <body>
        <div id="app">
          <h1 v-once>{{message}}</h1>
          <h2>{{message}}</h2>
          <h5 v-show="viewed" v-html="intro"></h5>
        </div>
        <button @click="rewrite" type="button" name="button" >Change</button>
      </body>



      <script>
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue World',
            intro: 'Welcome to the Tutorial <small>It is all about Vue.js</small>',
            viewed: true,
          },
          methods: {
            rewrite: function () {
              alert('Button Clicked!'),
              this.message = 'Bye vue World!!!',
            },
          },
        });
      </script>

    </html>

Answer 1

The problem with your code is that you put the button outside of div#app so the Vue instance doesn't affect it.您的代码的问题在于您将按钮放在div#app之外，因此 Vue 实例不会影响它。 Just move the button to be inside div#app and it'll work只需将按钮移动到div#app内即可

<body>
  <div id="app">
    <h1 v-once>{{message}}</h1>
    <h2>{{message}}</h2>
    <h5 v-show="viewed" v-html="intro"></h5>
    // move button into here
    <button @click.prevent="rewrite" type="button" name="button">Change</button> 
  </div>
</body>

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Vue.js Tutorial | Directives</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div id="app"> <h1 v-once>{{message}}</h1> <h2>{{message}}</h2> <h5 v-show="viewed" v-html="intro"></h5> <button @click.prevent="rewrite" type="button" name="button">Change</button> </div> </body> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue World', intro: 'Welcome to the Tutorial <small>It is all about Vue.js</small>', viewed: true, }, methods: { rewrite: function() { alert('Button Clicked!') this.message = 'Bye vue World!!!' }, }, }); </script> </html>

@click 事件在 vue.js 应用程序中不起作用

问题描述

1 个解决方案

解决方案1
4 2019-12-19 12:45:22

@click 事件在 vue.js 应用程序中不起作用

问题描述

1 个解决方案

解决方案1 4 2019-12-19 12:45:22

解决方案1
4 2019-12-19 12:45:22