一、文本插值

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