HTML部分

1. div id=" app" 盒子

2. v-for 循环 / v-html 带标签 / v-model 文本 / v-bind 绑定 / v-on 事件

3. {{nickname}}

4. img :src="item.img" alt=""> 图片地址

5. @click="item.count--" 绑定事件 / v-on:click="remove(i)"

   <div id="app">
   <input type="text" v-model="nickname">
   <br>
   {{nickname}}
   <br>
   {{nickname.toUpperCase()}}
   <h1 id="a1">{{nickname.toLowerCase()}}</h1>
   <h1>{{nickname.split('').reverse().join('')}}</h1>
   <hr>
   <ul>
       <li v-for="(item,i) in list">
           {{i+1}}.{{item}}
       </li>
   </ul>
   <hr>
   <!-- 带标签喧染 -->
   <div style="display: flex;height: 600px;">
       <textarea v-model="str1" style="flex: 1;background-color: black;color: white;"></textarea>
       <div v-html="str1" style="flex:1"></div>
   </div>
   </div>
   

JS部分

    new Vue({
        el: "#app",
        data() {
            return {
                nickname: "Simba",
                list: ['sce', 'simba', 'roger'],
                img: "http://img2.imgtn.bdimg.com/it/u=1195237174,1110588766&fm=26&gp=0.jpg",
                str1: "",
                str: `<table style="border: 1px solid #ccc;width: 500px;">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>20</td>
            <td>男</td>
        </tr>
    </table> `
            }
        },
        mounted() {
            let i = 0
            //onload DOM加载完之后
            let timer1 = setInterval(() => {
                this.str1 += this.str[i]
                i++
                if (i === this.str.length) clearInterval(timer1)
            }, 100)
        },
    })