Question

我试图在div上使用Vue的on-click指令，但它没有按预期触发。当我点击.demo课时没有任何反应;我应该点击一下＆＃39;在控制台中。我没有在控制台中看到任何错误，所以我不知道我做错了什么。

＆＃13;

var app = new Vue({
  el: '#app',
  data: {
    title: 'This is the first vue app',
    name: 'ALRAZY',
    link: 'http://google.com',
    attachRed: false
  },
  methods: {
    changeLink: function() {
      this.link = 'http://apple.com'
    }
  }
})

＆＃13;

body {
  font-family: 'Trykker', 'Spectral SC', serif;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Spectral SC', serif;
}

p {
  font-family: 'Trykker', serif;
}

.demo {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: inline-block;
  margin: 10px;
}

.red {
  background: red;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Spectral+SC:400,400i,500,500i,600|Trykker" rel="stylesheet" >
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="container">
  <div class="row">
    <div id="app">
      <h1>{{ title }} </h1>
      <input type="text" v-model="name" name="">
      <p> {{ name }}</p>
      <button onclick="changeLink" class="btn btn-danger btn-lg">click to change</button>
      <a :href="link" target="_blank">Link</a>
      <!-- style-vue -->
      <div class="demo" onclick="attachRed = !attachRed" :class="{red: attachRed}"></div>
      <p v-if="show">You can see me!!!</p>
      <p v-else>Do You see me??</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您正在使用不会触发vue方法的标准onclick属性。尝试使用v-on:click="changeLink()"或@click="changeLink()"（我不完全确定第二种语法是否正确）。这应该可以解决你的问题。

同样，您可以@click="attachRed = !attachRed"。

为什么在Vue.js中点击我的点击事件？

1 个答案: