vue动态页面可视化

首先我们建一个有可输入代码的文本域和展示有文本域输出效果的盒子，文本域textarea和input 元素中使用 v-model 实现双向数据绑定，展示的div使用 v-html 指令用于输出 html 代码效果。

<div id="container">  
          <textarea v-model="str1"></textarea>   
         <div v-html="str1"></div>
</div>

接着我们通过new Vue来实例化，在data里面定义str1为“”，使页面的初始效果为空白的，定义一个新的str用模板字符串写入要输出的代码，利用vue的计算属性computed设一个定时器，每过100毫秒将str的一个字符赋给str1，让str中的代码不断输入在文本域中，再根据v-model和v-html这两个属性就可以实现动态页面可视化（类似于打字机的效果）了。

<script src="js/vue.js"></script>   
 <script>       
 new Vue({           
    el: "#container",       
    data() {              
    return {                 
    str1: "",                   
    str: `<table>  
    <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 
        let timer1 = setInterval(() => {
            this.str1 += this.str[i]
            i++ 
            if (i === this.str.length) { clearInterval(timer1) }  //在str的内容显示完毕后清除定时器
        }, 100)
    },
}) 
</script>

为了便于演示，分别加一下样式

<style>
#container {
display: flex;
height: 600px;
}

#container>textarea {
flex: 1;
background-color: #000;
color: #fff;
}

#container>div {
flex: 1;
}

table {
border: 1px solid #ccc;
width: 500px
}
</style>