指令
v-once指令
用法:可单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改)。只渲染元素和组件一次,随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。
1 <div id="app"> 2 <input type="text" v-model="msg"> // 一旦赋值,只可主动更改 3 <input type="text" v-model="msg" v-once> 4 <p>{{ msg }}}</p> 5 <p v-once>{{msg}}}</p> // 一旦赋值,便不可更改 6 </div> 7 <script src="js/vue.js"></script> 8 <script> 9 new Vue({ 10 el:'#app', 11 data:{ 12 msg:'初始值' 13 } 14 }) 15 </script>
v-cloak指令
用法:防止页面闪烁。
1 <style> 2 [v-cloak] { 3 display: none; 4 } 5 </style> 6 <!-- 不处理的情况下,每次新价值该页面,都会先渲染{{}},当vue环境加载成功,{{}}有会被解析消失 --> 7 <!-- 处理后,vue环境没加载好时,#app是被隐藏的,vue环境加载成功,会依次#app的v-cloak属性,就不会出现{{}}渲染闪烁问题 --> 8 <div id="app" v-cloak> 9 {{ }} 10 {{ }} 11 {{ }} 12 </div> 13 <script src="js/vue.js"></script> 14 <script> 15 new Vue({ 16 el: '#app', 17 }) 18 </script>