title: How to use an attribute selector with vue.js?
body: <p>I would like to apply a <code>computed</code> style to an input form. The <a href="https://v2.vuejs.org/v2/guide/class-and-style.html" rel="nofollow noreferrer">documentation</a> explains how to do that, but only for simple styles.</p>
  <p>I need to apply the equivalent of</p>
  <pre><code>input[type=&quot;text&quot;], textarea {
    background-color : red; 
  }
  </code></pre>
  <p>but <strong>it is not clear for me how to convey the <code>[type=&quot;text&quot;]</code> bit</strong>.</p>
  <p>Using it verbatim does not work:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var vm = new Vue({
    el: "#root",
    data: {
      password: '',
    },
    computed: {
      passwordStyle: function() {
        var style = {}
        style['input[type="text"]'] = 'red';
        style['textarea'] = 'blue';
        return style;
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id="root&gt;"&gt;
    &lt;input type="text" name="password" autofocus="true" v-bind:style='passwordStyle'&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>