vue.js에서 속성 선택기를 사용하는 방법은 무엇입니까?

Question

computed 스타일을 입력 양식에 적용하고 싶습니다. documentation은 간단한 스타일에만 해당하는 방법을 설명합니다.

나는 [type="text"] 비트를 전달하는 방법을 나에게 분명하지 않다

input[type="text"], textarea { 
    background-color : red; 
} 

하지만 의 동등한를 적용해야합니다.

작동하지 않습니다 그대로를 사용 : 당신이 동적으로 어떤 요소의 스타일을 변경하고자 할 때

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>

Answer 1

당신은 같은 스타일 만이 아닌 CSS 선택기를 통과해야합니다. 실제로`passwordStyle`은`vm`` data` 변수의 다른 요소를 사용하여 복잡한 규칙 집합을 기반으로 계산됩니다.

Answer 2

당신은 조금 더 정교하게 귀하의 사용 사례를 설명 할 수, v-bind:style의 사용이다 , 일부 변수에 따라 코드에 따라 코드가 다음과 같이 변경됩니다. isActive 및 hasError 변수 :

<div class="static" 
    v-bind:class="{ active: isActive, 'text-danger': hasError }"> 
</div> 

data: { 
    isActive: true, 
    hasError: false 
} 

코드에서 변수를 기반으로 스타일을 변경하고 있습니다. 이것은 사실이다

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>