旭北阳
2021-04-30 15:42
采纳率: 50%
浏览 141
已采纳

ajax为什么不能在vue元素中使用

<div id="app">

    <input type="button" value="Get Server Time" id="btn">

</div>

<div id="showtime" class="displaybox"></div>
 
<script>
(function(){
 
    var btn = document.getElementById("btn");
    btn.addEventListener('click', getServerTime);
    var xhr = new XMLHttpRequest();
 
    function getServerTime() {
        var myurl = 'data.php';
        myRand = parseInt(Math.random() * 99999999);
        // 构造随机数,防止缓存问题
 
        var modurl = myurl + "?rand=" + myRand;
        xhr.open("GET", myurl);
        xhr.onreadystatechange = xhrResponse;
        xhr.send();
    }
 
    function xhrResponse() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var timeValue = xhr.responseText;
            
            document.getElementById('showtime').innerHTML = timeValue;;
        }
    }
    
<script>
    new Vue({
        el:"#app"
    })
</script>
})()
</script>

这是部分代码,我为input绑定了ajax函数,实现实时输出数据。

但是当div绑定了vue,就是添加了id="app",就导致绑定的ajax函数失效,id删除就正常输出了

这是为什么呀

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

7条回答 默认 最新

  • 已采纳


    div绑定了vue,div的代码就变成vue的模板,不能再用  btn.addEventListener('click', getServerTime); 绑定事件
    也不要 document.getElementById('showtime').innerHTML = timeValue 这样修改元素属性

    都要改用vue对应的方法
     

    评论
    解决 无用
    打赏 举报
查看更多回答(6条)

相关推荐 更多相似问题