绑定样式,点击一次后改变为指定样式。
1.初始的样式是基本样式basic加normal,随后点击,变换为basic+happy,其中basic是不会消失的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定样式</title>
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy {
border: 4px solid red;
;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad {
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal {
background-color: skyblue;
}
.atguigu1 {
background-color: yellowgreen;
}
.atguigu2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.atguigu3 {
border-radius: 20px;
}
</style>
<!--引入vue.js-->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!--绑定class样式的字符串写法,适用于样式的类名不确定,需要动态指定-->
<div id="root">
<!--增加div最基本的一个样式basic,永远不变-->
<!--给该盒子增加一个v-bind单向数据绑定-->
<!--正常的基本样式用class固定,变化的样式用绑定的形式写-->
<!--初始的样式是基本样式basic加normal,随后点击,变换为basic+happy-->
<div class="basic" v-bind:class="XinQing" @click="changeXinQing">{{name}}
<!--点击该div后,会增加新样式-->
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data() {
return {
name: '啊哈哈哈',
XinQing: 'normal'
}
},
//通过methods,让vue去修改选择我们的样式,不需要人工去修改DOM属性
methods: {
changeXinQing() {
this.XinQing = 'happy'
}
},
})
</script>
</html>
设置初始样式,点击后随机改变样式
1.这里把样式存进了数组,通过生成数组的随机索引值的方式,为XinQing指定样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定样式</title>
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy {
border: 4px solid red;
;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad {
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal {
background-color: skyblue;
}
.atguigu1 {
background-color: yellowgreen;
}
.atguigu2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.atguigu3 {
border-radius: 20px;
}
</style>
<!--引入vue.js-->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<!--绑定class样式的字符串写法,适用于样式的类名不确定,需要动态指定-->
<div id="root">
<!--增加div最基本的一个样式basic,永远不变-->
<!--给该盒子增加一个v-bind单向数据绑定-->
<!--正常的基本样式用class固定,变化的样式用绑定的形式写-->
<!--初始的样式是基本样式basic加normal,随后点击,随机变化样式-->
<div class="basic" v-bind:class="XinQing" @click="changeXinQing">{{name}}
<!--点击该div后,会增加新样式-->
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data() {
return {
name: '啊哈哈哈',
XinQing: 'normal'
}
},
//通过methods,让vue去修改选择我们的样式,不需要人工去修改DOM属性
methods: {
changeXinQing() {
//随机修改为某一样式,把样式名写进数组,然后根据其在数组中的索引值来指定。
//索引值随机生成
const arr = ['happy', 'sad', 'normal']
const index = Math.floor(Math.random() * 3)
//随机生成0至1之间的数(最大0.99999,最小0.00000001)*3,也可能是小数,然后在用math.floor向下取整
this.XinQing = arr[index]
//这样就使用了随机生成的索引值进行指定心情的样式
}
},
})
</script>
</html>
点击一次就去除一个样式 and 点击后是否出现某样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定样式</title>
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy {
border: 4px solid red;
;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad {
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal {
background-color: skyblue;
}
.atguigu1 {
background-color: yellowgreen;
}
.atguigu2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.atguigu3 {
border-radius: 20px;
}
</style>
<!--引入vue.js-->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<!--绑定class样式的字符串写法,适用于样式的类名不确定,需要动态指定-->
<!--增加div最基本的一个样式basic,永远不变-->
<!--给该盒子增加一个v-bind单向数据绑定-->
<!--正常的基本样式用class固定,变化的样式用绑定的形式写-->
<!--初始的样式是基本样式basic加normal,随后点击,随机变化样式-->
<!--点击该div后,会变换新样式-->
<div class="basic" v-bind:class="XinQing" @click="changeXinQing">{{name}}</div><br>
<!--绑定class样式的数组写法,适用于要绑定的样式个数不确定,名字也不确定-->
<div class="basic" v-bind:class="YangShiArr" @click="change1">{{name}}</div><br>
<!--绑定class样式的对象写法,适用于要绑定的样式个数确定,名字也确定,但要动态决定用不用-->
<div class="basic" v-bind:class="YangShiObj" @click="change2">{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data() {
return {
name: '啊哈哈哈',
XinQing: 'normal',
YangShiArr: ['atguigu1', 'atguigu1', 'atguigu1'],
YangShiObj: { atguigu1: false, atguigu2: true }
}
},
//通过methods,让vue去修改选择我们的样式,不需要人工去修改DOM属性
methods: {
changeXinQing() {
//随机修改为某一样式,把样式名写进数组,然后根据其在数组中的索引值来指定。
//索引值随机生成
const arr = ['happy', 'sad', 'normal']
const index = Math.floor(Math.random() * 3)
//随机生成0至1之间的数(最大0.99999,最小0.00000001)*3,也可能是小数,然后在用math.floor向下取整
this.XinQing = arr[index]
//这样就使用了随机生成的索引值进行指定心情的样式
},
change1() {
//每点击一次,就会删除掉一个样式
this.YangShiArr.shift();
},
change2() {
//每点击一次,就会改变一次组合,通过改变布尔值。决定该样式是否出现。
this.YangShiObj.atguigu1 = !this.YangShiObj.atguigu1
this.YangShiObj.atguigu2 = !this.YangShiObj.atguigu2
}
},
})
</script>
</html>
点击一次后,样式减少一个。
点击一次后,样式出现组合发送生改变,。
绑定style样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定style样式</title>
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy {
border: 4px solid red;
;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad {
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal {
background-color: skyblue;
}
.atguigu1 {
background-color: yellowgreen;
}
.atguigu2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.atguigu3 {
border-radius: 20px;
}
</style>
<!--引入vue.js-->
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<!--绑定class样式的字符串写法,适用于样式的类名不确定,需要动态指定-->
<!--增加div最基本的一个样式basic,永远不变-->
<!--给该盒子增加一个v-bind单向数据绑定-->
<!--正常的基本样式用class固定,变化的样式用绑定的形式写-->
<!--初始的样式是基本样式basic加normal,随后点击,随机变化样式-->
<!--点击该div后,会变换新样式-->
<div class="basic" v-bind:class="XinQing" @click="changeXinQing">{{name}}</div><br>
<!--绑定class样式的数组写法,适用于要绑定的样式个数不确定,名字也不确定-->
<div class="basic" v-bind:class="YangShiArr" @click="change1">{{name}}</div><br>
<!--绑定class样式的对象写法,适用于要绑定的样式个数确定,名字也确定,但要动态决定用不用-->
<div class="basic" v-bind:class="YangShiObj" @click="change2">{{name}}</div><br>
<!--绑定style样式-->
<div class="basic" v-bind:style="styleObj">{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data() {
return {
name: '啊哈哈哈',
XinQing: 'normal',
YangShiArr: ['atguigu1', 'atguigu1', 'atguigu1'],
YangShiObj: { atguigu1: false, atguigu2: true },
//font-size=40px交给vue管理
styleObj: {
fontSize: '40px'
},
}
},
//通过methods,让vue去修改选择我们的样式,不需要人工去修改DOM属性
methods: {
changeXinQing() {
//随机修改为某一样式,把样式名写进数组,然后根据其在数组中的索引值来指定。
//索引值随机生成
const arr = ['happy', 'sad', 'normal']
const index = Math.floor(Math.random() * 3)
//随机生成0至1之间的数(最大0.99999,最小0.00000001)*3,也可能是小数,然后在用math.floor向下取整
this.XinQing = arr[index]
//这样就使用了随机生成的索引值进行指定心情的样式
},
change1() {
//每点击一次,就会删除掉一个样式
this.YangShiArr.shift();
},
change2() {
//每点击一次,就会改变一次组合,通过改变布尔值。决定该样式是否出现。
this.YangShiObj.atguigu1 = !this.YangShiObj.atguigu1
this.YangShiObj.atguigu2 = !this.YangShiObj.atguigu2
}
}
}
)
</script>
</html>