SOURCE

console 命令行工具 X clear

                    
>
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;
}