<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind绑定class </title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="box" class="bigbox" v-bind:class="{active: isActive,'text-danger':hasError}">v-bind绑定原生属性class有两种方法 这是第一种</div>
<!-- v-bind是专门用来绑定html原生属性的
这里是一个对象，里面的key是class的名称，值是绑定数据，当绑定数据为true的时候，这个class就会渲染到html里；
注意key这里加 ‘’或不加都是一样的。
-->
<!--
</body>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
isActive:true,
hasError:false //这是一种方法
}
})
</script>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind绑定class </title>
</head>
<body>
<div id="box" class="bigbox" v-bind:class="classObject">v-bind绑定原生属性class有两种方法 这是第二种对象表示</div>
v-bind是专门用来绑定html原生属性的
这里是一个对象，里面的key是class的名称，值是绑定数据，当绑定数据为true的时候，这个class就会渲染到html里；
注意key这里加 ‘’或不加都是一样的。
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
classObject:{ //这种方法直接绑定一个对象
isActive:false,
hasError:true
}
}
})
</script>
</html> -->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind绑定class </title>
</head>
<body>
<div id="box" class="bigbox" v-bind:class="[activeClass, errorClass]">v-bind绑定原生属性class有两种方法 这是第三种数组表示</div>
v-bind是专门用来绑定html原生属性的
这里是一个对象，里面的key是class的名称，值是绑定数据，当绑定数据为true的时候，这个class就会渲染到html里；
注意key这里加 ‘’或不加都是一样的。
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{ //这种方法用数组表示
activeClass:'active',
errorClass:'text-danger'
}
})
</script>
</html>
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind绑定class </title>
</head>
<body>
<div id="box" class="bigbox" v-bind:class="[isActive ? activeClass : '', errorClass]">v-bind绑定原生属性class有几种方法 这是第四种数组表示</div>
v-bind是专门用来绑定html原生属性的
这里是一个对象，里面的key是class的名称，值是绑定数据，当绑定数据为true的时候，这个class就会渲染到html里；
注意key这里加 ‘’或不加都是一样的。
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{ //这种方法用数组表示
activeClass:'active',
errorClass:'text-danger'
}
})
</script>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind绑定class </title>
</head>
<body>
<div id="box" class="bigbox" v-bind:class="[{ active: isActive }, errorClass]">v-bind绑定原生属性class有几种方法 这是第五种数组表示</div>
<!-- v-bind是专门用来绑定html原生属性的
这里是一个对象，里面的key是class的名称，值是绑定数据，当绑定数据为true的时候，这个class就会渲染到html里；
注意key这里加 ‘’或不加都是一样的。 -->
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{ //这种方法用数组表示
activeClass:'active',
errorClass:'text-danger'
}
})
</script>
</html>
// 二次视频学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind 实例</title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
.classA{
color: red;
}
.classB{
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h1>v-bind实例</h1>
<div id="app">
<p><img v-bind:src="imgSrc" alt="" width="200"></p>
<p><a :href="webUrl" target="_blank">百度</a></p>
<p>
<label for="chek">isok值为:{{isok}}</label>
<input type="checkbox" id="chek" v-model="isok">
</p>
<div :class="className">01、绑定</div>
<div :class="{classB:isok}">02、绑定class中的判断</div>
<div :class="[classA,classB]">03、绑定class中数组</div>
<div :class="isok?classA:classB">04、绑定class中的三元运算符</div>
<div :style="{color:color,fontSize:font}">05、绑定style方法-01</div>
<div :style="styleObj">06、绑定对象style方法-02</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
imgSrc:"http://img1.imgtn.bdimg.com/it/u=3284176169,1506766548&fm=200&gp=0.jpg",
webUrl:"http://baidu.com",
className:"classA",
isok:false,
classA:'classA',
classB:'classB',
color:"yellow",
font:'20px',
styleObj:{
color:'green',
fontSize:'30px'
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号