vue学习之绑定属性 绑定class及style
绑定属性:
<template>
<!-- v-bind:属性 简写 :属性-->
<div id="app">
<p v-bind:title="title">鼠标移上去看看</p>
<!-- v-bind:属性 简写 :属性-->
<p :title="title">鼠标移上去看看</p>
<hr>
<img v-bind:src="url" alt="">
<hr>
<!-- 绑定html -->
<div v-html="p"></div>
<!-- 绑定文本text -->
{{msg}}
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg:'我是绑定的text',
title:'我是绑定的title属性',
url:'src/assets/logo.png',
p:'<p>我是一个p标签</p>'
}
},
methods:{
}
}
</script>
运行效果如下:
绑定class与style:
<template>
<!-- v-bind:属性 简写 :属性-->
<div id="app">
<div v-bind:class="{'red':flag}">中华人民共和国</div>
<div :class="{'red':!flag, 'blue':flag}">富强明主和谐</div>
<ul>
<!-- 多个用,隔开 -->
<li v-for="(item,index) in list" :key="index" :class="{'red':index==0,'blue':index==1}">
{{item}}
</li>
</ul>
<!-- 绑定style -->
<div v-bind:style="{color: activeColor,fontSize: fontSize + 'px'}">迎接祖国70华诞</div>
<!-- 接绑定到一个样式对象通常更好,这会让模板更清晰 -->
<div v-bind:style="styleObject">中华人民共和国万岁</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return{
flag : true,
list : ['新闻1','新闻2','新闻3'],
activeColor : 'red',
fontSize : 30,
styleObject: {
color: 'red',
fontSize: '20px'
}
}
},
methods:{
}
}
</script>
<style lang="scss">
.red{
color: red;
}
.blue{
color: blue;
}
</style>
运行效果如下: