vue-project-------（模板语法，属性绑定）

<template>

  <h3>模板语法</h3>
  <p>{{msg}}</p>
  <p>{{number+1}}</p>
  <p>{{flag? 'yes':'no'}}</p>
  <p>{{message.split("").reverse().join("")}}</p>
  <p v-html="rawHtml"></p>
  <div v-bind:class="msg2">测试</div>
  <button :disabled="flag">确认</button>
  <div v-bind="apple">测试2</div>
  <IfDemo/>
  <ListDemo></ListDemo>
  <EventDemo></EventDemo>
</template>
<script>
import IfDemo from "@/components/IfDemo.vue";
import ListDemo from "@/components/listDemo.vue";
import EventDemo from "@/components/EventDemo.vue";
export default {
  components: {EventDemo, ListDemo, IfDemo},
  data() {
    return{
      msg:"神奇的语法",
      number :10,
      flag :false,
      message:"大家好",
      rawHtml:"<a href='https://www.baidu.com/'>百度</a>",
      msg2:"active",
      apple:{
        class: "appleClass",
        id:"appleId"
      }
    }

  }
}
</script>