Vue指令（二）

Vue指令（二）

Vue指令（二）

v-cloak

v-cloak(没有值) 解决闪烁问题 需要搭配css的style样式使用

[v-cloak]{
	display:none;
}

<h1 id="app" v-cloak>{{ AA  }}</h1>

var vm = new Vue({
	el:"#app",
	data(){
		return { AA:"解决闪烁问题"}
	}
})

v-once

v-once(没有值) 设置了之后，值不会发生改变

<div id="app">
        <h1 v-once>{{num}}</h1>
        <h1>{{num}}</h1>
        <button @click="func()">点击</button>
 </div>

var vm = new Vue({
        el: "#app",
        data() {
            return { num: 0 }
        },
        methods: {
            func() {
                this.num++;
            }
        }
    })

v-pre

v-pre(没有值) 跳过编译，会让指令和插值失效

<div id="app">
         <h1 v-pre>{{num}}</h1>
        <h1>{{num}}</h1>
        <button @click="func()">点击</button>
 </div>

var vm = new Vue({
        el: "#app",
        data() {
            return { num: 0 }
        },
        methods: {
            func() {
                this.num++;
            }
        }
    })

v-model

v-mdoel 双向数据绑定； 不仅可以把数值从data流向页面，还能从页面流向data。通常搭配表单标签使用。如 input ， select ， textarea

<div id="app">
         不会流向data<input type="text" :value="num">
        <br>
        会流向data<input type="text" v-model:value="num">
        <button @click="func()">点击</button>
 </div>

Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return { num: "ABCD" }
        },
        methods: {
            func() {
                console.log(this.num);
            }
        }
    })

注：使用v-model时，尽量直接写v-model，v-model默认是绑定value值，只有在需要设置初始值的时候，才使用v-model:value="初始值"

• 失联

最后编辑时间 2024，03，11；16：08