Conditions rendering, render list, Class and Style Bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<div v-if="count > 100"> 大于100的</div>
<div v-else-if="count > 0 && count <10">大于0小于10</div>
<div v-else="count < 0 ">负数</div>
<div v-for="item in items">
<div v-show="item.age > 25" v-bind:style="{'color':'red'}">{{item.name}}</div>
<div v-show="item.age < 25" v-bind:style="sty">{{item.name}}</div>
</div>
</div>
<script>
var app =new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
sty:{
color:'blue'
},
count:1,
items:[{
name:'zong',
age:35
},{
name:'zsd',
age:23
}]
}
})
</script>
</body>
</html>
