console
linfui.use(['method'], function () {
Vue.prototype.$m = linfui.method;
new Vue({
el: '#app',
data: {
resuilt:''
},
methods:{
f1(){
this.resuilt=this.$m.getDom('.class1')[0].innerHTML
},
f2(){
this.resuilt=this.$m.getDom('.class1')[1].innerHTML
},
f3(){
let ele=this.$m.addDom('<div class="class2">我是添加的子节点</div>')
let ele2=this.$m.getDom('.class1')[0]
ele2.append(ele)
},
f4(){
let ele=this.$m.getDom('.class1')[0]
if(ele.hasChildNodes()){
ele.removeChild(ele.lastChild);
}
},
f5(){
let ele=this.$m.getDom('.class1')[1]
let dom_arr=this.$m.sonQueDom(ele,'.class2')
this.resuilt=dom_arr
dom_arr[0].style.color='red'
dom_arr[1].style.color='red'
}
},
created(){
}
})
});
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/linf-ui@latest/dist/linfui.js"></script>
<div id="app">
<div class="class1">class1-1</div>
<div class="class1">
class1-2
<div class="class2">class2-2</div>
<div class="class2">class2-2</div>
</div>
<button @click="f1()">获取第一个class1里的内容</button>
<button @click="f2()">获取第二个class1里的内容</button>
<button @click="f3()">向一个class1里增加节点</button>
<button @click="f4()">删除第一个class1里的最后一个子节点</button>
<button @click="f5()">获取第二个class1里的所有子节点</button>
<div>结果:{{resuilt}}</div>
</div>
body{
background:#f3f5f6;
}
[v-cloak] {
display: none;
}
.class1,.class2{
padding: 5px;
border: 1px solid #ccc;
}