vue样式
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.bootcss...
·
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style type="text/css">
.red{
color: red;
},
.bg{
background-color: aqua;
}
</style>
<title></title>
</head>
<body>
<div id="app">
<h2 v-bind:class="{red:is_red, }">今天天气很不错,适合学习</h2><!-- 字典里面键名为类名,键值为判断是否显示的判断条件 -->
<h2 v-bind:class="style_object">你真是一个小天才</h2>
<h2 v-bind:class="[red, bg]">444</h2><!-- 样式列表 列表里面为data里的属性,属性对应的键值为style样式的名字 -->
<todo-item></todo-item>
<div id="" v-bind:style="{color:font_color}">
人人为我,我为人人
</div>
<h4 v-bind:style="bind_style">哈哈哈</h4>
</div>
<script type="text/javascript">
Vue.component('todo-item',{
template:'<li class="red">好好学习</li>'
})
vm = new Vue({
el:'#app',
data:{
is_red:true,
style_object:{
red:true
},
red:'red',
bg:'bg',
font_color:'blue',
bind_style:{
color:'pink'
}
}
})
</script>
</body>
</html>
更多推荐
已为社区贡献10条内容
所有评论(0)