(十一)vue定义事件，通过业务逻辑的js给html元素的style,class绑定动态值
1：通过事件获取简单页面元素值和设置页面元素值
html代码:
{{ msg }}js业务逻辑代码: export default { name: "App", data() { return { msg: "yyyy",//给msg绑定默认值 myclass: "red", }; }, methods: {//在呢里面定义js事件 setmsg() { this.msg = "hhhh"; }, getmsg() { alert(this.msg); }, updatecolor() { this.myclass = "blue"; }, } 2：通过对象动态给class绑定多个值 html代码:
div1
js业务逻辑代码:
data() {
return {
isactive: true,
isred: false,
}
}
3：通过对象在class后面追加:class
div2
4：通过数组动态给class绑定多个值
di3
js业务逻辑代码:
data() {
return {
redclass: "red",
activeclass: "active",
}
}
5：通过数组动态给class绑定多个值，并且使用三目运算符号判断当前class是否显示
div4
6：拼接给style绑定多个元素
div5
js业务逻辑代码:
data() {
return {
redclass: "red",
fontsizes1: "45",
}
}
7：通过对象给style绑定多个元素
>
div6
8：通过js业务逻辑里面的对象直接给style绑定多个元素
div7
js业务逻辑代码:
data() {
return {
objcolor: {
color: "red",
fontSize: "45px",
},
}
}
9：通过数组给style绑定多个元素
div8
10：通过对象动态给class绑定多个值得方式实现单行蓝色，双行绿色 html代码:
- {{ item }}