VUE学习教程（二）：绑定对象、属性和循环数组渲染数据

<template>

  <!--  vue的模板里面 所有的内容要被一个根节点包含起来  -->

  <div id="app">
    
    <h2>{{msg}}</h2>

    <br>

    这是一个根组件

    <br>

    <h3>{{obj.name}}</h3>

    <br/>
    <hr>
    <br>
<!-- 循环取出数组  -->
    <ul>
       <li  v-for="item in list">
            {{item}}  
 
      </li>   
    </ul>

      <hr>
    <br>
    <ul>
        <li v-for="item in list1">
               {{item.title}}
        </li>
    </ul>

      <hr>
    <br>
    <ul>
        <li v-for="item in list2">
               {{item.cate}}

                   <!--   有序序列   -->
               <ol>
                    <li v-for="news in item.list">
                       {{news.title}}
                    </li>
               </ol>
        </li>
    </ul>

<br>
<!-- 绑定属性 -->
<div v-bind:title="title">鼠标瞄上去看一下</div>

 <!-- 绑定html -->
<div v-html="h">
</div>

<!-- 绑定数据的另一种方式 -->
<div v-text="msg">
</div>

<br>
<!-- v-bind:class  -->
<div v-bind:class="{'red':flag}">
我是一个div
</div>

<br>
<!-- 其中v-bind可以省略 -->
<div v-bind:class="{'red':flag,'blue':!flag}">
我是另一个div
</div>
<br>

<!-- 循环数据 第一个数据高亮  -->
  <ul>
       <li  v-for="(item,key) in list" >
            {{key}}-----{{item}}  
      </li>   
    </ul>

<br>
  <ul>
       <li  v-for="(item,key) in list" :class="{'red':key==0,'blue':key==1}">
            {{key}}-----{{item}}  
      </li>   
    </ul>

<br>

<!-- v-bind:style  :style的使用 -->
<div class="box" v-bind:style="{'width':boxWidth+'px'}">
  我是一个box
</div>
<br>

</div>
 
</template>

<script>
export default {
  data(){ /*业务逻辑里面定义的数据*/
    return {
      msg:'你好vue',
      obj:{
        name:"张三"
      },
      list:['111','222','333'],
      list1:[
        {'title':'111'},
        {'title':'222'},
        {'title':'333'},
        {'title':'444'}
      ],
      list2:[
        {
          "cate":"国内新闻",
          "list":[
                {'title':'国内新闻111'},
                {'title':'国内新闻222'}
          ]
        },
          {
          "cate":"国际新闻",
          "list":[
                {'title':'国际新闻111'},
                {'title':'国际新闻222'}
          ]
        }
      ],
      title:'我是一个title',
      h:'<h2>我是一个h2</h2>',
      flag:false,
      boxWidth:300
    }
  }
}
</script>

<style >

.red{
  color: red;
}
.blue{
  color: blue;
}
.box{
  height: 100px;
  width: 100px;
  background: red;
}
</style>