0
点赞
收藏
分享

微信扫一扫

Vue 条件渲染,列表循环,样式操作

佃成成成成 2022-07-14 阅读 63

<!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>

举报

相关推荐

0 条评论