2020-02-05
2020-02-05 本文已影响0人
我是萌哒哒小羊
vue 样式的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic {
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- 传统样式使用代码 -->
<h1 class="red thin">这是个很大的h1，大到无法想象！！！</h1>
<!-- 第一种使用方式，直接传递一个数组，注意：这里的class需要使用 v-bind做数据绑定 -->
<!-- <h1 :class="['thin','italic']">这是个很大的h1，大到无法想象！！！</h1> -->
<!-- 对象就是无序键值对的集合 通过链接v-bind style链接-->
<h1 :style="styleobj1">这是一个h1</h1>
<h1 :style="{ color: '#FF0000','font-weight':'200px'}">这是一个h1</h1>
<!-- 通过在data里面写键值对的方式来修改样式 同时可以传递一个数组上去 -->
<h1 :style="[styleobj1,styleobj2]">这是一个h1</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
styleobj1:{ color: '#cdffed','font-weight':'200px'},
},
methods:{
}
})
</script>
</body>
</html>
