Vue.js学习(3)-页面数据渲染及绑定(属性,class,html,style)
1.vue循环渲染数据及v-for循环实现 v-for<br> 在html中代表插入换行符<hr> 在html中代表一条水平线<template><div id="app"><h2>你好---{{msg}}</h2><br><h2>{{obj.name}}&...
·
1.vue循环渲染数据及v-for循环实现 v-for
<br> 在html中代表插入换行符
<hr> 在html中代表一条水平线
<template>
<div id="app">
<h2>你好---{{msg}}</h2>
<br>
<h2>{{obj.name}}</h2>
<br>
<hr>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
<br>
<hr>
<ul>
<li v-for="item in list1">
{{item.title}}
</li>
</ul>
<br>
<hr>
<ul>
<li v-for="item in list2">
{{item.cate}}
<ol>
<li v-for="news in item.list">
{{news.title}}
</li>
</ol>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to sunny Vue',//基础数据源
obj:{//对象数据源
name:"孙悟空"
},
list:["1","2","3"],//数组数据源
list1:[//对象数组数据源
{title:"111"},
{title:"222"},
{title:"333"}
],
list2:[//复杂数组数据源
{"cate":"国内新闻",
"list":[
{"title":"国内新闻01"},
{"title":"国内新闻02",}
]},
{"cate":"国际新闻",
"list":[
{"title":"国际新闻01"},
{"title":"国际新闻02",}
]}
]
}
}
}
</script>
<style lang="scss">
</style>
2.属性绑定 v-bing:title
<template>
<div id="app">
<h2>你好---{{msg}}</h2>
<br>
<hr>
<div v-bind:title = "title">请用鼠标看我</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to sunny Vue',//基础数据源
title:"我是一个属性绑定测试文本",
}
}
}
</script>
<style lang="scss">
</style>
3.html绑定 v-html
<template>
<div id="app">
<h2>你好---{{msg}}</h2>
<br>
<hr>
<div v-html="h2"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
h2:"<h2>我是一个h2</h2>"
}
}
}
</script>
<style lang="scss">
</style>
4.class绑定 v-bind:class
实现list数组的第一行高亮显示
<template>
<div id="app">
<h2>你好---{{msg}}</h2>
<br>
<hr>
<div v-html="h2"></div>
<ul v-for="(item,key) in list" v-bind:class="{'red':key==0}">
{{item}}
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
h2:"<h2>我是一个h2</h2>",
list:["100","200","300"],
flag:true,
}
}
}
</script>
<style lang="scss">
.red{
color: red;
}
.blue{
color: blueviolet;
}
</style>
5.style绑定 v-bind:style
<template>
<div id="app">
<h2>你好---{{msg}}</h2>
<br>
<hr>
<div v-html="h2"></div>
<ul v-for="(item,key) in list" v-bind:class="{'red':key==0}">
{{item}}
</ul>
<div class="box" v-bind:style="{width:boxwidth + 'px'}"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
h2:"<h2>我是一个h2</h2>",
list:["100","200","300"],
boxwidth:300
}
}
}
</script>
<style lang="scss">
.red{
color: red;
}
.blue{
color: blueviolet;
}
.box{
height: 100px;
width: 100px;
background: blueviolet;
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)