vue学习06--v-bind:class和v-bind:style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind - 绑定页面中的元素属性</title>
<script src="js/" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/*v-bind:class*/
.class0{color: greenyellow;}
.red{color: red;}
.yellow{color: yellow;}
.bold{font-size:24px;}
.class0{font-size: 24px;}
.class1{color: #008000;}
.arr1{font-size: 24px;}
.arr2{color: #008000;}
.err{font-size: 24px;}
.trueClass{color: #008000;}
/*v-bind:style*/
</style>
</head>
<body>
<div id="bindClass">
<h2>1、</h2>
<p v-bind:class="{class0:isTrue}">测试v-bind:class（默认应用样式：background:green）</p>
<button @click="changeIsTrue">去除上方p元素样式</button>
<br />
<a v-bind:href="Href">
<img v-bind:src="Src"/>
</a>
<h2>2、</h2>
<p v-bind:class="{red:isRed,yellow:isYellow}">样式覆盖问题(style中，样式在下方的覆盖上方的[黄色覆盖红色])</p>
<br />
<h2>3、</h2>
<p v-bind:class="{bold:isBold,red:isRed}">同时应用多个样式(24px，红色)</p>
<h2>4、</h2>
<p v-bind:class="classObject">直接应用样式对象数组</p>
<h2>5、数组语法</h2>
<p v-bind:class="[arr1C,arr2C]">数组语法</p>
<h2>6、三元表达式</h2>
<p v-bind:class="[errC,isT?trueC:'']">三元表达式</p>
</div>
<script type="text/javascript">
var x = 0;
var app = new Vue({
el:'#bindClass',
data:{
Href:"",
Src:'img/',
isTrue:true,
isRed:true,
isYellow:true,
isBold:true,
classObject:{
class0:true,
class1:true
},
arr1C:'arr1',
arr2C:'arr2',
errC:'err',
isT:true,
trueC:'trueClass'
},
methods:{
changeIsTrue:function(){
this.isTrue=false;
}
}
})
</script>
<div id="bindStyle">
<h2>7、bind-style（直接绑定）</h2>
<p v-bind:style="{color:colorS,fontSize:fontSizeX+'px'}">bind-style</p>
<h2>8、bind-style（样式对象）</h2>
<p v-bind:style="styleX">bind-style</p>
<h2>9、bind-style（样式对象数组）</h2>
<p v-bind:style="[styleXX,styleXY]">bind-style数组</p>
<h2>10、v-bind:指令</h2>
<p v-bind:title="mag">bind-style数组</p>
</div>
<script type="text/javascript">
var bindStyle = new Vue({
el:"#bindStyle",
data:{
colorS:"red",
fontSizeX:24,
styleX:{
color:"red",
fontSize:"24px"
},
styleXX:{
color:"red",
fontSize:"24px"
},
styleXY:{
background:"yellow"
}
}
})
</script>
<div id="bindTitle">
<h1 v-bind:title="title" v-bind:data-ti="myTitle">title提示为：