<template>
<div class="hello">
<!-- 绑定属性title -->
<div v-bind:title="title">
鼠标移动上去看一下
</div>
<br>
<!-- 可以简写为： 注意是动态事件 -->
<a :href="url">11</a>
<!-- 绑定属性的另一种写法 -->
<h1 v-text="title"></h1>
<!-- 绑定html写法 -->
<div v-html="h"></div>
<!-- 绑定class -->
<div :class="{‘red‘:flag}">
我是一个div
</div>
<div :class="{‘red‘:flag,‘blue‘:!flag}">
我是另一个div
</div>
<!-- 动态绑定样式，list中键值对 -->
<ul>
<li v-for="(key,item) in list" :class="{‘red‘:item == 0,‘blue‘:item == 1}">
{{item}}--{{key}}
</li>
</ul>
<!-- 绑定style样式 -->
<div class="box" :style="{‘height‘:boxbig+‘px‘}"></div>
</div>
</template>
<script>
export default {
data () {
return {
title:‘我是一个title‘,
url:‘https://www.baidu.com/‘,
h:‘<h2>这是一段h2标签的代码</h2>‘ ,
flag:false,
list:[‘111‘,‘222‘,‘3333‘],
boxbig:700,
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.red{
color: red
}
.blue{
color: blue
}
.box{
width: 200px;
height: 300px;
"> aquamarine;
}
</style>
