<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
vue
</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<!--
列表(list)
條件(if else)
show
class bind
style bind
-->
<body>
<div id="app">
<div v-if="count > 0">
count > 0: {{count}}
</div>
<div v-else-if="count > -5 && count < 0">
co1unt < 0 & count> -5: {{count}}
</div>
<div v-else>
count:{{count}}
</div>
<div v-show="count == -1">show:{{count}}</div>
{{msg}}
<div v-for="item in list">
{{item}}
</div>
<div v-for="item in lists">
<!-- 綁定 class style -->
<div v-if="item.age < 20" :class="['active','add','more',{'another': item.age > 30}]" :style="styleMsg">
<div v-show="item.name == 'lmf'">姓名:{{item.name}}</div>
年齡：{{item.age}}
住址：{{item.addr}}
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'hello vue!',
styleMsg: {
color: 'red',
textShadow: '0 0 5px green', // 陰影
},
count: 0,
list: [1, 2, 3, 4, 5],
lists: [
{
name: 'lmf',
age: '18',
addr: 'cf'
}, {
name: 'lfx',
age: '25',
addr: 'bj'
}
]
}
})
</script>
</body>
</html>
