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前面加:就可以