{{nickname.toUpperCase()}}

{{nickname.toLowerCase()}}

{{nickname.split('').reverse().join('')}}

---

• {{i+1}}. {{item}}

---

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                nickname:"Simba",
                list:['ace','Simba','roger'],
                str1:"",
                str:`<table style="border:1px solid #ccc;width:500px"
                <tr>
                <td>姓名</td>
                <td>张三</td>
                <td>性别</td>
                <td>男</td>
                </tr>
                <tr>
                <td>姓名</td>
                <td>李四</td>
                <td>性别</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);
        }
    })
</script>