vue的ref试用

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

posted on 2018-05-15 11:52 周小姐你好阅读(158) 评论(0) 编辑收藏举报