vue--简单数据绑定

<template>
  <div id="app">
    {{msg}} //绑定数据
    {{obj.name}} //绑定对象
    <p v-for="x in list">{{x}}</p> //绑定列表
    <p v-for="x in list1">{{x.name}}</p> //绑定列表
    <p v-bind:title="title">{{title}}</p> //绑定属性
    <p :title="title">{{title}}</p>//简写
    <p v-bind:url="url">{{url}}</p> //绑定属性
    <p :url="url">{{url}}</p> //绑定属性
    <p v-html="html"></p> //绑定HTML
    <p v-text="html"></p> //绑定文本
    <p :class="{'red':color}">{{title}}</p> //绑定类名
    <p :class="{'red':color,'blue':!color}">{{title}}</p> //绑定类名
    <p :style="{'width':boxwidth}">{{msg}}</p> //绑定样式
  </div>
</template>
<script>
export default {
  name: 'App',
  data (){
    return {
      msg:"你好！",
      obj:{name:'张三'},
      list:['a','b','c','d'],
      list1:[
        {name:'110'},
        {name:'112'}
      ],
      title:'标题',
      url:'http://www.baidu.com/',
      html:"<h2>标题</h2>",
      color:true,
      boxwidth:'500px'
    }
  }
}
</script>