1、代码如下&＃xff1a;
<!DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>class与style绑定</title><style>.classA {color: red;}.classB {background: blue;}.classC {font-size: 20px;}</style>
</head>
<body><!--
1. 理解在应用界面中, 某个(些)元素的样式是变化的class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class&＃61;&＃39;xxx&＃39;xxx是字符串xxx是对象xxx是数组
3. style绑定:style&＃61;"{ color: activeColor, fontSize: fontSize &＃43; &＃39;px&＃39; }"其中activeColor/fontSize是data属性
--><div id&＃61;"demo"><h2>1. class绑定: :class&＃61;&＃39;xxx&＃39;</h2><p :class&＃61;"myClass">xxx是字符串</p><p :class&＃61;"{classA: hasClassA, classB: hasClassB}">xxx是对象</p><p :class&＃61;"[&＃39;classA&＃39;, &＃39;classB&＃39;]">xxx是数组</p><h2>2. style绑定</h2><p :style&＃61;"{color:activeColor, fontSize}">:style&＃61;"{ color: activeColor, fontSize: fontSize &＃43; &＃39;px&＃39; }"</p><button &＃64;click&＃61;"update">更新</button></div><script type&＃61;"text/Javascript" src&＃61;"../js/vue.js"></script>
<script type&＃61;"text/Javascript">new Vue({el: &＃39;#demo&＃39;,data: {myClass: &＃39;classA&＃39;,hasClassA: true,hasClassB: false,activeColor: &＃39;red&＃39;,fontSize: &＃39;20px&＃39;},methods: {update () {this.myClass &＃61; &＃39;classB&＃39;this.hasClassA &＃61; !this.hasClassAthis.hasClassB &＃61; !this.hasClassBthis.activeColor &＃61; &＃39;yellow&＃39;this.fontSize &＃61; &＃39;30px&＃39;}}})
</script>
</body>
</html>
2、效果图如下&＃xff1a;
1&＃xff09;初始页面效果图&＃xff1a;
2&＃xff09;点击更新之后的效果图&＃xff1a;
京公网安备 11010802041100号