Vue v-once命令的用法
例如,在下面的示例中,当修改 input 输入框的值时,使用了 v-once 指令的 p 元素不会随之改变,而第二个 p 元素会随着输入框的内容而改变。
示例:Vue v-once指令的使用。
<div id="app"> <p v-once>不可改变:{{message}}</p> <p>可以改变:{{message}}</p> <p><input type="text" v-model = "message" name=""></p> </div> <!--引入Vue文件--> <script src="https://unpkg.com/vue@next"></script> <script> //创建一个应用程序实例 const vm= Vue.createApp({ //该函数返回数据对象 data(){ return{ message:"苹果" } } //在指定的DOM元素上装载应用程序实例的根组件 }).mount('#app'); </script>在 Chrome 浏览器中运行程序,然后在输入框中输入“苹果的库存还有800公斤”,可以看到,添加 v-once 指令的 p 标签并没有任何变化,效果如图1所示。
图1:Vue 中 v-once 指令的演示
推荐阅读
- C语言整数逆序输出
- 汇编语言SAL(算术左移)和SAR(算术右移)指令:将操作数左/右移一位
- Visual Studio运行Python程序(超级详细)
- C++ STL标准库这么多排序函数,该如何选择?
- C# if else:条件判断语句
- 目标检测介绍(非常详细)
- C语言free():释放堆内存
- PHP number_format()函数的用法
- C#拼接字符串(用+运算符)
- Python程序的运行过程(小白必看)