1. 程式人生 > >vue的class和style

vue的class和style

vue class和style

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>class和style</title>

</head>

<script type="text/javascript" src="js/vue.js" ></script>

<script>

window.onload = function(){

//配置是否允許檢查代碼,方便調試,生產環境中設置為false

Vue.config.devtools = true; //檢查代碼

Vue.config.productioinTip = false; //有強迫癥的,可以關掉生產中的提示信息

let vm = new Vue({

el: "#div1",

data:{

pp:‘a‘,

p2:{a:true,b:true}, //可以用json格式,true就是為啟用,false就是禁用

sty:{color:‘blue‘} //style形式

}

});

}

</script>

<style type="text/css">

.a{background-color: yellow}

.b{font-size: 20px;}

</style>

<body>

<div id="div1">

<p :class="p2">class屬性</p>

<p :style="sty">style屬性</p>

</div>

</body>

</html>


vue的class和style