1、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>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application" style="text-align: center;">
<!-- 未渲染 -->
<!-- <h1>这里是模板的内容:{{count}}次点击</h1> -->
<!-- 渲染之后 -->
<h1 v-once>这里是模板的内容:{{count}}次点击</h1>
<button v-on:click="clickButton">按钮</button>
</div>
<script>
const App={
data() {
return {
count:0
}
},
methods:{
clickButton(){
this.count=this.count+1
}
}
}
Vue.createApp(App).mount("#Application")
</script>
</body>
</html>
v-once
2、v-html
可以指定一个Vue变量数据，其会通过HTML解析的方式将原始HTML替换到其指定的标签位置
注：插入文本为一段HTML代码，直接使用使用双括号就不太好使了，会将其中的变量解析成纯文本。可以通过HTML解析的方式将原始HTML替换到其指定的标签位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application" style="text-align: center;">
<!-- 未渲染 -->
<!-- <h1 v-once>这里是模板的内容:{{countHTML}}次点击</h1> -->
<!-- 渲染之后 -->
<h1 v-once>这里是模板的内容:<span v-html="countHTML"></span>次点击</h1>
<button v-on:click="clickButton">按钮</button>
</div>
<script>
const App={
data() {
return {
countHTML:"<span style='color:red'>0</span>"
}
},
methods:{
clickButton(){
this.count=this.count+1
}
}
}
Vue.createApp(App).mount("#Application")
</script>
</body>
</html>
v-html
3、v-bind
可以动态的改变标签style的属性，从而实现元素渲染样式的修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
#h1{
color:red
}
</style>
</head>
<body>
<div id="Application" style="text-align: center;">
<!-- 未渲染 -->
<!-- <h1>这里是模板的内容:{{count}}次点击</h1> -->
<!-- 渲染之后 -->
<h1 v-bind:id="id1">这里是模板的内容:{{count}}次点击</h1>
<button v-on:click="clickButton">按钮</button>
</div>
<script>
const App={
data() {
return {
count:0,
id1:"h1"
}
},
methods:{
clickButton(){
this.count=this.count+1
}
}
}
Vue.createApp(App).mount("#Application")
</script>
</body>
</html>
v-bind
标签：count,Vue,bind,App,HTML,-----,模板,once From： https://www.cnblogs.com/lixianhui/p/17675682.html