vue 里报错 Uncaught TypeError: Cannot read property 'style' of null

<body>
<div id="img"  >
<img id="zp111" src="img/bg01n.png" >
                </div>
</body><script type="text/javascript">

new Vue({
        el: '#img',
        data: {
            sites: []
        },
        created: function () {
　　　　　　//为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
            var self = this;
var shuzi = document.getElementById("shuzi")
var zp111 =document.getElementById("zp111")

            $.ajax({
                url: "https://www.tianqiapi.com/api/",
                type: 'get',
                data: 'version=v1&city=恩施',
                dataType: 'json'
            }).then(function (res) {
                console.log(res);
// 　　　　　　　　　console.log(res.data[0].wea);
if(res.data[0].wea == "小雨")
{
document.getElementById("zp111").style.backgroundImage="url(img/bg03d.png)"
}
                self.sites = res;
            }).fail(function () {
                console.log('失败');
            })
        },

    })
</script>

解决方案 »

  1.   

    created阶段dom还没有创建成功。
      

  2.   

    楼主的代码没有错误。而且created阶段dom已经生成的。不过建议改掉手动操作dom行为，否则用vue还有什么意义：
    <div id="img">
        <img id="zp111" :src="src" >
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#img',
            data: {
                src: 'img/bg01n.png',
                sites: []
            },
            created: function () {
                var self = this;
                $.ajax({
                    url: "https://www.tianqiapi.com/api/",
                    type: 'get',
                    data: 'version=v1&city=恩施',
                    dataType: 'json'
                }).then(function (res) {
                    if(res.data[0].wea === "小雨"){
                        self.src = "img/bg03d.png"
                    }
                    self.sites = res;
                }).fail(function () {
                    console.log('失败');
                })
            },
        })
    </script>