（1）作用：
（1）使得标签内部的属性一旦被赋值便不可以被更改
（2）如果是input框 可以主动输入数据进行更改
（2）使用方式
<div id="app"> <!-- 其不加 v-once input框内数据可以更改--> <p><input type="text" v-model="num"></p> <!-- 其加了v-once input框内数据不能随着别的数据变动而变动 但是可以主动变动--> <p><input type="text" v-model="num" v-once></p> <!-- 无论标签内部数据是否变动 其都不会变动--> <p v-once>{{num}}</p> </div> </body> <script> let app = new Vue({ el: ‘#app‘, data: { num: 0 }, }) </script>
（1）作用：防止页面闪烁
<style> [v-cloak] { display: none; } </style> <!-- 不处理的情况下，每次新价值该页面，都会先渲染{{}}，当vue环境加载成功，{{}}有会被解析消失 --> <!-- 处理后，vue环境没加载好时，#app是被隐藏的，vue环境加载成功，会依次#app的v-cloak属性，就不会出现{{}}渲染闪烁问题 --> <div id="app" v-cloak> {{ }} {{ }} {{ }} </div> <script src="js/vue.js"></script> <script> new Vue({ el: ‘#app‘, }) </script>
（1）作用：
（1）可以控制标签的显隐
（2）绑定的都是布尔值
（3）v-if不会渲染标签
（5）v-show会以{display:none}的形式隐藏标签
<div id="app"> <!-- 其下方布尔值对应为false不会再页面渲染出来 且检测内部html标签也不会被渲染--> <p v-if="is_show">if标签渲染</p> <!-- 其下方布尔值对应为false不会再页面渲染出来 检测内部html标签会以display：none的形式渲染--> <p v-show="is_show">show标签渲染</p> </div> </body> <script> let app = new Vue({ el: ‘#app‘, data: { is_show: false } }) </script>
（1）作用：
（1）类似于条件语句进行逻辑判断
（2）使用方式：
v-if = ‘布尔值‘
v-else-if = ‘布尔值‘
v-else
PS：v-else没有条件 上述条件都不成立 走else条件
<div id="app"> <!-- 情况一 v-if布尔值为真 只有其才会进行页面渲染--> <p v-if="0">if条件语句运行</p> <!-- 情况二 v-else-if布尔值为真 其余都为假 只有其才会进行页面渲染--> <p v-else-if="0">else-if条件语句运行</p> <!-- 情况三 上述if条件都为假 else会进行渲染 且只要if条件对应的布尔值为假 无论else对应的布尔值如何 都会进行渲染--> <p v-else>else条件语句运行</p> </div> </body> <script> let app = new Vue({ el: ‘#app‘, }) </script>
<style> .box { width: 400px; height: 300px; } .r { background-color: red; } .y { background-color: yellow } .b { background-color: blue; } </style> </head> <body> <div id="app"> <div class="em"> <p> <!-- 点击事件 此时点击红 页面显示红色框 以此类推--> <button @click="chang_box(‘rbox‘)">红</button> <button @click="chang_box(‘ybox‘)">黄</button> <button @click="chang_box(‘bbox‘)">蓝</button> </p> <!-- 页面渲染三个框 根据showname对应的值不同进行不同的页面渲染 --> <div class="box r" v-if="showname==‘rbox‘"></div> <div class="box y" v-else-if="showname==‘ybox‘"></div> <div class="box b" v-else="showname==‘bbox‘"></div> </div> </div> </body> <script> let app = new Vue({ el: ‘#app‘, data: { // 默认渲染红色 showname: ‘rbox‘ }, methods: { // 上述点击事件会进行传参 当传参的参数赋值给函数 函数将传值赋值给showname chang_box(name) { this.showname = name } } }) </script>
原文：https://www.cnblogs.com/SR-Program/p/11643952.html