动态样式
动态STYLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态样式</title>
</head>
<body>
<div id="app">
<p :style="styleObj">动态style--对象写法</p>
<p :style="{color:'blue'}">动态style--对象写法</p>
<p :style="styleArr">动态style--数组写法</p>
<p :style="[{color:'green'},{fontSize:'32px'}]">动态style--数组写法</p>
</div>
<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
setup() {
// style对象写法
const styleObj = { color: 'red' };
// style数组写法
const styleArr = [{color:'pink',fontFamily:'宋体'}]
return { styleObj,styleArr };
}
}).mount('#app');
</script>
</body>
</html>
动态CLASS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态样式</title>
<style>
.myColor {
color: red;
}
.myFont {
font-family: '宋体';
}
</style>
</head>
<body>
<div id="app">
<!-- 动态class--字符串写法 -->
<p :class="classString">动态class--字符串写法</p>
<!-- 动态class--对象写法 -->
<p :class="classObj">动态class--对象写法</p>
<p :class="{'myFont':true}">动态class--对象写法</p>
<!-- 动态class--数组写法 -->
<p :class="classArr">动态class--数组写法</p>
<p :class="[{'myColor':true}]">动态class--数组写法</p> </div>
<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
setup() {
const classString = 'myColor'
const classObj = { 'myFont': true }
const classArr = [{'myColor':true}, { 'myFont': true }]
return { classString, classObj,classArr };
}
}).mount('#app');
</script>
</body>
</html>
浙公网安备 33010602011771号