一、文本:
在html
中通过{{}}
(双大括号)中可以把Vue
对象中的数据插入到网页中。并且只要Vue
对象上对应的值发生改变了,那么html
中双大括号中的值也会立马改变。
<script setup name="App">import { ref } from 'vue'let username = ref('张三')function onModifyUsername() {username.value = '李四'}
</script><template><p>用户名:{{ username }}</p><button @click="onModifyUsername">修改用户名</button>
</template>
当然,如果在html
的{{}}
中,第一次渲染完成后,不想要跟着后期数据的更改而更改,那么可以使用v-once
指令来实现。示例代码如下:
<p v-once>{{username}}</p>
二、显示原生的HTML
有时候我们的Vue
对象中,或者是后台返回给我们一个段原生的html
代码,我们需要渲染出来,那么如果直接通过{{}}
渲染,会把这个html
代码当做字符串。这时候我们就可以通过v-html
指令来实现。示例代码如下:
<script setup name="App">let code = "<h1>欢迎来到知了课堂</h1>"
</script><template><div v-html="code"></div>
</template>
三、属性绑定
如果我们想要在html
元素的属性上绑定我们Vue
对象中的变量,那么需要通过v-bind
来实现。比如以下代码是不行的:
<script setup name="App">let classname = "main"
</script><template><div class="classname">粉红色的回忆</div>
</template><style scoped>.main{background-color: pink;}
</style>
需要使用v-bind
才能生效:
<template><div v-bind:class="classname">粉红色的回忆</div>
</template>
或者可以把v-bind
省略,仅保留:class
即可:
<template><div :class="classname">粉红色的回忆</div>
</template>
四、使用JavaScript
表达式:
在使用了v-bind
,或者{{}}
的语法中。我们还可以执行一个JavaScript
表达式。示例代码如下:
<script setup name="App">let temp = 19;
</script><template><div>{{ temp>18?'出去玩':'回家睡觉' }}</div>
</template>
注意,只能是JavaScript
表达式,不能是语句,比如var a=1;a=2;
这样的是js
语句,不是表达式了。
五、条件判断:
在模板中,可以根据条件进行渲染。条件用到的是v-if
、v-else-if
以及v-else
来组合实现的。示例代码如下:
<script setup name="App">let weather = 'sun';
</script><template><p v-if="weather == 'sun'">今天去公园玩!</p><p v-else-if="weather == 'rain'">今天去看电影!</p><p v-else>今天哪儿也不去!</p>
</template>
六、v-show和v-if:
v-if
是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 相比之下,v-show
就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS
进行切换。 一般来说,v-if
有更高的切换开销,而v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show
较好;如果在运行时条件很少改变,则使用v-if
较好。