前端 - jquery 无法获取到vue.js v-for 渲染过后dom元素
本文介绍了前端 - jquery 无法获取到vue.js v-for 渲染过后dom元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
vue.js是一个js框架库,我用的是 1.0 版本
v-for 是用来循环渲染dom的标签
<li v-for="m in menuLeft" v-on:click="goContent(m,$event)">
{{m}}
</li>
// menuLeft = [6,5,4,3]
渲染结果
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>上面的代码点击li过后可以通过$event获取到dom节点,
但是通过jquery无法获取到
$("body").find("li") // 不行
$("ul").children("li") // 不行有什么方法可以通过jQuery获取到li ?
我自己搞错了
这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义
解决方案
使用了vue，不推荐使用jQuery 来操作DOM。
看vue 1.0版本的文档中理解下实例生命周期 ready 是dom节点渲染完成
vue 2.0 DOM渲染完生命周期是mountedvue 2.0的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14、生命周期---head里面是元数据</title>
<script src="./js/vue.js"></script>
<script src="https://unpkg.com/jquery@3.2.1"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="m in menuLeft" v-on:click="goContent(m,$event)">
{{m}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
menuLeft: [6, 5, 4, 3]
},
methods: {
goContent(m, $event) {
console.log(m,$event);
}
},
ready() {
console.log($("body").find("li")); // 有值 [li, li, li, li, prevObject: jQuery.fn.init(1)]
console.log($("ul").children("li")); // 有值 [li, li, li, li, prevObject: jQuery.fn.init(1)]
$('body').find('li').html('这里有值了'); // html修改了
}
});
</script>
</body>
</html>这篇关于前端 - jquery 无法获取到vue.js v-for 渲染过后dom元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
