Vue3学习笔记-模板语法和属性绑定-2
一、文本插值
使用{ {val}}放入变量，在JS代码中可以设置变量的值
<template>
<p>{
{msg}}</p>
</template>
<script>
export default {
data(){
return {
msg: '文本插值'
}
}
}
</script>
文本值可以是字符串，可以是布尔值或数字，也可以是bool ? 'str1': 'str2'
<template>
<p>{
{msg}}</p>
<p>{
{num+3}}</p>
<p>{
{isOk}}</p>
<p>{
{isOk ? 'yes': 'no'}}</p>
</template>
<script>
export default {
data(){
return {
msg: '文本插值',
isOk: true,
num: 5
}
}
}
</script>二、属性绑定
属性不可以直接使用{ {}}进行绑定，需要使用v-bind。
<template>
<button v-bind:id="id_name" v-bind:class="class_name">{
{button_text}}</button>
</template>
<script>
export default {
data(){
return{
button_text:'开始',
class_name:'hello',
id_name: 'hello',
}
}
}
</script>
简写：直接在class前面加:就可以