VUE——v-once指令

v-once指令

仅渲染元素和组件一次,并跳过之后的更新。

官网介绍

v-once用法:


<span v-once>This will never change: {{msg}}span>

<div v-once>
  <h1>commenth1>
  <p>{{msg}}p>
div>

<MyComponent v-once :comment="msg" />

<ul>
  <li v-for="i in list" v-once>{{i}}li>
ul>

例子:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="onceApp">
        <button @click="changeOnce()">改变aboutOnce值button>
        <div v-once>{{aboutOnce}}div>
    div>
    <script src="./vue.js">script>
    <script>
        new Vue({
            el: '#onceApp',
            data: {
                aboutOnce: '关于v-once的用法',
                changeOnce() {
                    this.aboutOnce = "改变了"
                }
            },
        })
    script>
body>

html>

你可能感兴趣的:(VUE,vue.js,前端,javascript)