基本指令v-once
基本指令v-once v-once 也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或 组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容 下面示例,原本是每一秒展示动态随机数,但是因为使用v-once 首次渲染后,就不在改变数字了<!DOCTYPE html><html lang="en"><head><
·
基本指令v-once
v-once 也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或 组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容
下面示例,原本是每一秒展示动态随机数,但是因为使用v-once 首次渲染后,就不在改变数字了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" >
<span v-once>{{message}}</span>
</div>
<script src="vue.js">
</script>
<script>
var app = new Vue({
el:"#app",
data:{message:0},
mounted()
{
_this = this;
// 这样才可以指向vue实例
this.timer = setInterval(function(){_this.date = new Date();_this.message = Math.random() },1000);
}
})
</script>
<!--
v-once 也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或 组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容
原本是每一秒展示动态随机数,但是因为使用v-once 首次渲染后,就不在改变数字了
-->
</body>
</html>
展示效果:
更多推荐
已为社区贡献3条内容
所有评论(0)