11

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data() {

    return {

      msg: ''

    }

  },

  mounted() {

    // let x = `

    //   <view class="padding bg-white flex">

    //     <view class="flex-sub flex align-center l-left-item">

    //       <view class="cuIcon-read" style="font-size: 30rpx;"></view>

    //       <text>教学方式1</text>

    //     </view>

    //     <view class="flex-twice">

    //       线上

    //     </view>

    //   </view>

    //   <view class="padding bg-white flex">

    //     <view class="flex-sub flex align-center l-left-item">

    //       <view class="cuIcon-read" style="font-size: 30rpx;"></view>

    //       <text>教学方式2</text>

    //     </view>

    //     <view class="flex-twice">

    //       线上

    //     </view>

    //   </view>

    // `

    // const parser = new DOMParser();

    // const doc = parser.parseFromString(x, 'text/html');

    // const textNode = doc.querySelectorAll('text');

    // const list = textNode; // 获取text元素的内容

    // list.forEach(item => {

    //   console.log(item.textContent)

    // })

    const parser = new DOMParser();

    const htmlString = `<text c='123'>讲师1：</text>

        <text c='345'>讲师2：</text>

        <text c='567'>讲师3：</text>`;

const doc = parser.parseFromString(htmlString, 'text/html');

const textNodes = doc.querySelectorAll('text'); // 获取所有匹配的text元素

textNodes.forEach(node => {

  const attributeValue = node.getAttribute('c'); // 获取c属性的值

  console.log(attributeValue);

});

  },

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h3 {

  margin: 40px 0 0;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>