[英]How to use an attribute selector with vue.js?
我想將computed
樣式應用於輸入表單。 該文檔解釋了如何做到這一點,但僅適用於簡單的樣式。
我需要申請相當於
input[type="text"], textarea {
background-color : red;
}
但我不清楚如何傳達[type="text"]
位。
逐字使用它不起作用:
var vm = new Vue({ el: "#root", data: { password: '', }, computed: { passwordStyle: function() { var style = {} style['input[type="text"]'] = 'red'; style['textarea'] = 'blue'; return style; } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <div id="root>"> <input type="text" name="password" autofocus="true" v-bind:style='passwordStyle'> </div>
您只需要傳遞樣式,而不是 css 選擇器,例如:
var vm = new Vue({ el: "#root", data: { password: '', }, computed: { passwordStyle: function() { return { backgroundColor: 'red' }; } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <div id="root"> <input type="text" name="password" autofocus="true" :style="passwordStyle"> </div>
您能否詳細解釋一下您的用例,使用v-bind:style
是當您想要根據某些變量動態更改某些元素的樣式時,就像在文檔中一樣,以下代碼根據更改 CSS isActive
和hasError
變量:
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
isActive: true,
hasError: false
}
我沒有在您的代碼中看到您正在根據任何變量更改樣式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.