<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <p ref="good">不要啦</p> <button @click="add()">添加</button> </div> </body> <script src="./node_modules/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods:{ add:function () { console.log(this.$refs.good,1111) this.$refs.good.style.color="red" } }, created:function(){ // this.getGood() } }) </script> </html>
要注意的是：
因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
一个方法，直接在created里面调,是不可以的,出现的是undefined.