首页 > 其他分享 >Vue.js 内置指令 v-once指令

Vue.js 内置指令 v-once指令

时间:2023-03-17 15:11:54浏览次数:49  
标签:内置 false Vue js 指令 once

视频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-once指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			v-once指令:
						1.v-once所在节点在初次动态渲染后,就视为静态内容了。
						2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>
</html>

标签:内置,false,Vue,js,指令,once
From: https://www.cnblogs.com/chuixulvcao/p/17226862.html

相关文章

  • uniapp 隐藏nvue子窗口 不生效
    下面是uniapp官方给到,显示和关闭NVue子窗体的方法 //通过id获取nvue子窗体constsubNVue=uni.getSubNVueById('map_widget')//打开nvue子窗体su......
  • vue添加eslint配置规则
    eslint配置方法eslint的规则有三个选项:"off"或者0,不启用这个规则"warn"或者1,出现问题会有警告"error"或者2,出现问题会报错在根目录创建.eslintrc.js,代码如下:modul......
  • Vue 学习笔记
      各目录作用{{}}引用data中的值v-html引用data中的值并渲染到页面上v-bind控制属性中的值缩写v-model数据双向绑定v-ifv-on:click监听事件缩写{{message|c......
  • 万字血书Vue—Vue语法
    模板语法插值语法Mustache插值采用{{}},用于解析标签体内容,将Vue实例中的数据插入DOM中<h1>Hello{{name}}</h1>指令语法指令用于解析标签,是vue为开发者提供的一套......
  • vue中的get方法\post方法如何实现传递数组参数
    问题:后端接口参数里面带有数组,但是前端按常规方式提交后后台收不到数组数据解决方法:将数据用qs处理过后再提交请求封装:exportclassAxiosHttpService{$http:Ax......
  • Electron + Vue3 + TS + sqlite3项目搭建
    Electron+Vue3+TS+sqlite3项目搭建基础环境nodev14.20.1npmv6.14.17安装vue-cli$npminstall@vue/[email protected]//等待安装完成$vue-V//@vue/cli5......
  • (Vue3.0二维码),复制链接
    一:复制链接1、html部分:<el-dialogv-model="dialogTableVisible"title="分享方式"><el-row><el-buttonclass="copy"data-clipboard-text="getUlr"click="copy......
  • Vue——el-option下拉框绑定
    Vue——el-option下拉框绑定https://blog.csdn.net/wx19900503/article/details/1092684801、正常使用v-for进行遍历下拉框内容,如果需要增加一个自定义的值,则加一个el......
  • vue3 + vue-clipboard3 复制文本到剪切板
    1.安装yarnaddvue-clipboard32.引入importuseClipboardfrom'vue-clipboard3';3.html部分<n-buttontertiarytype="primary"ref="copyBtn"@click="copyP......
  • VUE父子组件生命周期执行顺序
    组件关系,HomeView与AboutView为同级,HelloWorld为HomeView的子组件刚进HomeView页面时更新HomeView页面更新HelloWorld页面切换到AboutView......