vue初学时提示“Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.”

<template>
    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      counter: 0
    }
  },
  methods: {
  },
  computed: {
  },
  watch: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.active {
  width: 200px;
  height: 200px;
  background:red
}
.unac {
  width: 200px;
  height: 200px;
  background:black
}
</style>

 

编译时提示

 ERROR  Failed to compile with 1 errors                                                                                                                                                09:49:29

 error  in ./src/components/HelloWorld.vue

(Emitted value instead of an instance of Error) 
  Error compiling template:
  
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
  
  - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.


 @ ./src/components/HelloWorld.vue 11:0-366
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

原因是vue只能有一个模板跟对象，你需要一个元素来包裹所有的元素如div

正确的写法是

<template>
  <div>
    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
  </div>
</template>