<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染，列表循环，样式操作</title>
</head>
<body>
<div id="app">
<div class="bg">
hello world!! </br>
{{msg}} {{count}}
</div>
<div v-html="template">
<div>成都今天的天气是19度，2019-05-30</div>
</div>
<div v-if="count > 0">
count大于0，count的值：{{count}}
</div>
<div v-else="">
count小于0，count的值：{{count}}
</div>
<!--v-for-->
<div v-for="item of list" style="color: #dedede">
{{item}}
</div>
<div v-for="item of list" style="color: skyblue">
{{item}}
</div>
<div v-for="item of tempArr" style="color: skyblue" v-bind:style="styleMsg" :class="{'active': true}}">
{{item.name}}--{{item.age}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "hello word",
styleMsg: {
color: 'red',
textShadow: '0 0 5px #232323',
},
count: 0,
template: `<div>成都今天的天气是19度，2019-05-30</div>`,
list: [1,2,3,4,5],
tempArr: [{'name': '张三', age: '22岁'},{'name': '历史', age: '18岁'},{'name': '王五', age: '16岁'}]
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染，列表循环，样式操作</title>
</head>
<body>
<div id="app">
<div class="bg">
hello world!! </br>
{{msg}} {{count}}
</div>
<div v-html="template">
<div>成都今天的天气是19度，2019-05-30</div>
</div>
<div v-if="count > 0">
count大于0，count的值：{{count}}
</div>
<div v-else="">
count小于0，count的值：{{count}}
</div>
<!--v-for-->
<div v-for="item of list" style="color: #dedede">
{{item}}
</div>
<div v-for="item of list" style="color: skyblue">
{{item}}
</div>
<div v-for="item of tempArr" style="color: skyblue" v-bind:style="styleMsg" :class="{'active': true}}">
{{item.name}}--{{item.age}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "hello word",
styleMsg: {
color: 'red',
textShadow: '0 0 5px #232323',
},
count: 0,
template: <div>成都今天的天气是19度，2019-05-30</div>,
list: [1,2,3,4,5],
tempArr: [{'name': '张三', age: '22岁'},{'name': '历史', age: '18岁'},{'name': '王五', age: '16岁'}]
}
})
</script>
</body>
</html>