vue css inline style All In One
class / class name ✅
<el-form-item v-else class="is-required" label="Android" prop="aosPackageId">
<el-select
v-model="ruleForm.aosPackageId"
@change="aosPackageChange">
<el-option
v-for="(aos, i) in aosPackageList"
:key="i"
:value="aos.id"
:label="aos.name">
</el-option>
</el-select>
</el-form-item>
style / inline style
非标准 css 驼峰写法 ❌
<el-form-item
style="marginTop: -8px; marginLeft: 10px;"
label=""
class="m-b-12"
prop="schedule">
//
</el-form-item>
非标准 css 驼峰写法 ✅ (:style cssStyleObject)
<el-form-item
v-bind:style="{marginTop: -8px, marginLeft: 10px,}"
label=""
class="m-b-12"
prop="schedule">
//
</el-form-item>
标准 css keywords 连字符写法 ✅
<el-form-item
style="margin-top: -8px; margin-left: 10px;"
label=""
class="m-b-12"
prop="schedule">
//
</el-form-item>
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue inline style 测试</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<hr />
<p style="fontSize: 36px;" >style="fontSize: 36px;"</p>
<p style="font-size: 36px;" >style="font-size: 36px;"</p>
</div>
<script>
new Vue({
el: '#app',
data: {
title: 'Vue inline style 测试'
}
})
</script>
</body>
</html>
https://www.runoob.com/try/try.php?filename=vue2-hw
refs
https://cn.vuejs.org/v2/guide/class-and-style.html
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！