<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>