Vue框架入门到实践(三)

渲染

• 条件渲染

<div v-if="true" > if判断为真，惰性渲染</div>
<div v-show="true" > 元素总是会被渲染</div>

• 列表渲染

<ul id="app">
<li v-for="item,index in items" :key="index">{{index}} {{item.message}}</li>   //遍历数组
<li v-for="value,key in object :key="key">{{key}}:{{value}}</li>   //遍历对象
<script type="text/javascript">   
var app = new Vue({
	el : '#app',
     data : {
     items : [
        {message: 'hello'},
        {message:'world'}
     ],
     object:{
      name:'test',
      age:18,
      sex:'girl'
     }
     }
});
</script>