<div id="app"> {{nickname}} <input type="text" v-model='nickname'> <hr> {{age}} <button v-on:click="add">add</button> <hr> <div v-show="isShow">hi</div> <div v-if="isShow">以登录 v-if 为false会销毁标签， 为true则创建标签</div> <div v-else="isShow">未登录</div> <h4>操作DOM如增删标签会比较消耗性能 所以频繁切换显示隐藏的 使用v-show如轮播图 只判断一次 使用v-if</h4> <button @click="toggle">切换</button> </div> <script src="../vue.js"></script> <script> new Vue({ el: '#app', data() { return { age: 20, isShow: true, nickname: 'Simba', list: [11, 33, 55, 66], } }, methods: { add() { this.age++ }, toggle() { this.isShow = !this.isShow } } }) </script>
其中v-ifshow 的属性在为false时 v-esle的属性为true 这样不仅可以不改变网页呈现的效果 而且还可以减少资源的浪费
<div id="app"> <textarea name="" id="" cols="30" rows="10" v-model='str'></textarea> </div> <script src="../vue.js"></script> <script> new Vue({ el: '#app', data() { return { str: '' } }, mounted() { let str1 = 'Hell World' let i = 0 let timer = setInterval(() => { this.str +=str1[i] i++ if(this.str===str1) clearInterval(timer) }, 100); } })
这里可以仅仅几行代码就介意实现歌词的展现 原生js 复杂 耗时间 vue 简洁方便使用
