<style> .custom-input input { color: red !important; } </style> <el-input class="custom-input" disabled style="width: 120px;margin-right: 20px" v-model="'已花费'+ temp.dispatchPoint_1 + '点'"></el-input>这段代码红色字体没效果
时间: 2024-03-13 19:42:50 浏览: 21
这段代码应该是 Vue.js 模板语法,其中的样式是被 scoped 限制的,所以在全局样式中无法直接修改。
如果您想要修改这段代码中的颜色,可以在组件样式中增加一个非 scoped 的样式来覆盖掉原来的样式,例如:
```
<style scoped>
.custom-input input {
color: red !important;
}
.custom-input >>> .el-input__inner { /* 用 >>> 来穿透 scoped */
color: red !important;
}
</style>
<template>
<el-input class="custom-input" disabled style="width: 120px;margin-right: 20px" v-model="'已花费'+ temp.dispatchPoint_1 + '点'"></el-input>
</template>
```
这里分别给 `.custom-input input` 和 `.custom-input >>> .el-input__inner` 添加了一个红色的 `color` 样式。注意第二个选择器中使用了 `>>>` 来穿透 scoped。
相关问题
<el-input class="custom-input" disabled style="width: 120px;margin-right: 20px;color: red!important;" v-model="'已花费'+ temp.dispatchPoint_1 + '点'"></el-input>字体红色无效果
如果仍然没有效果,那么可能是由于浏览器的安全策略导致样式无法生效,你可以尝试在CSS文件中设置样式,或者在页面中使用<style>标签来设置样式。例如:
```
<style>
.custom-input input {
color: red !important;
}
</style>
<el-input class="custom-input" disabled style="width: 120px;margin-right: 20px" v-model="'已花费'+ temp.dispatchPoint_1 + '点'"></el-input>
```
这样应该可以将字体颜色设置为红色。
<template> <div> <h2 style="text-align: center">水源判识</h2> <el-row :gutter="10"> <el-col :span="3" class="check_text"> <el-checkbox v-model="select.a" label="覆土厚度(cm)"></el-checkbox> </el-col> <el-col :span="5"> <el-input :disabled="!select.a" v-model="value.a" type="number" @blur="value.a=$event.target.value.trim()"></el-input> </el-col> </el-row> </div> </template> <script> module.exports = { data() { select:{ a:false, }, value: { a: -1, }, }, methods: { }, mounted:{ } } </script>这段代码有什么问题
这段代码有一个语法错误:在 `data()` 方法中,应该使用逗号 `,` 而不是冒号 `:` 来分隔 `select` 和 `value` 属性。修改后的代码如下:
```html
<template>
<div>
<h2 style="text-align: center">水源判识</h2>
<el-row :gutter="10">
<el-col :span="3" class="check_text">
<el-checkbox v-model="select.a" label="覆土厚度(cm)"></el-checkbox>
</el-col>
<el-col :span="5">
<el-input :disabled="!select.a" v-model="value.a" type="number" @blur="value.a=$event.target.value.trim()"></el-input>
</el-col>
</el-row>
</div>
</template>
<script>
module.exports = {
data() {
return {
select: {
a: false,
},
value: {
a: -1,
},
}
},
methods: {},
mounted() {},
}
</script>
```