Vue Style Binding

Posted on  by admin
For v3.x, click here. A common need for data binding is manipulating an element’s class list and its inline styles. Since they are both attributes, we can use v-bind to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when v-bind is used with class and style. In addition to strings, the expressions can also evaluate to objects or arrays. We can pass an object to v-bind:class to dynamically toggle classes:. The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive. You can have multiple classes toggled by having more fields in the object. In addition, the v-bind:class directive can also co-exist with the plain class attribute. So given the following template:. And the following data:. It will render:. When isActive or hasError changes, the class list will be updated accordingly. For example, if hasError becomes true, the class list will become "static active text-danger". The bound object doesn’t have to be inline:. This will render the same result. We can also bind to a computed property that returns an object. This is a common and powerful pattern:. We can pass an array to v-bind:class to apply a list of classes:. Which will render:. If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression:. This will always apply errorClass, but will only apply activeClass when isActive is truthy. However, this can be a bit verbose if you have multiple conditional classes. That’s why it’s also possible to use the object syntax inside array syntax:. This section assumes knowledge of Vue Components. Feel free to skip it and come back later. When you use the class attribute on a custom component, those classes will be added to the component’s root element. Existing classes on this element will not be overwritten. For example, if you declare this component:. Then add some classes when using it:. The rendered HTML will be:. The same is true for class bindings:. When isActive is truthy, the rendered HTML will be:. The object syntax for v-bind:style is pretty straightforward - it looks almost like CSS, except it’s a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:. It is often a good idea to bind to a style object directly so that the template is cleaner:. Again, the object syntax is often used in conjunction with computed properties that return objects. The array syntax for v-bind:style allows you to apply multiple style objects to the same element:. When you use a CSS property that requires vendor prefixes in v-bind:style, for example transform, Vue will automatically detect and add appropriate prefixes to the applied styles. Starting in 2.3.0+ you can provide an array of multiple (prefixed) values to a style property, for example:. This will only render the last value in the array which the browser supports. In this example, it will render display: flex for browsers that support the unprefixed version of flexbox. ← Computed Properties and WatchersConditional Rendering →. Caught a mistake or want to contribute to the documentation?Edit this on GitHub!Deployed onNetlify . We can use the v-on directive to listen to DOM events:. We are binding a click event listener to a method named greet. Here’s how to define that method in our Vue instance:. Test it yourself:. Instead of binding directly to a method name, we can also use an inline JavaScript statement:. Similar to the restrictions on inline expressions, event handlers are restricted to one statement only. Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable:. It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details. To address this problem, Vue.js provides two event modifiers for v-on: .prevent and .stop. Recall that modifiers are directive postfixes denoted by a dot:. In 1.0.16, two additional modifiers have been introduced:. When listening for keyboard events, we often need to check for common key codes. Vue.js also allows adding key modifiers for v-on when listening for key events:. Remembering all the keyCodes is a hassle, so Vue.js provides aliases for most commonly used keys:. Here’s the full list of key modifier aliases:. delete (captures both “Delete” and, if the keyboard has it, “Backspace”). 1.0.8+: Single letter key aliases are also supported. 1.0.17+: You can also define custom key modifier aliases:. You might be concerned that this whole event listening approach violates the good old rules about “separation of concern”. Rest assured - since all Vue.js handler functions and expressions are strictly bound to the ViewModel that’s handling the current View, it won’t cause any maintenance difficulty. In fact, there are several benefits in using v-on:. It makes it easier to locate the handler function implementations within your JS code by simply skimming the HTML template. Since you don’t have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free. This makes it easier to test. When a ViewModel is destroyed, all event listeners are automatically removed. You don’t need to worry about cleaning it up yourself. ← List RenderingForm Input Bindings →. Caught a mistake or want to contribute to the documentation?Edit this page on Github! The NativeScript Playground is a place in the cloud where you can just play around with NativeScript and Vue.js from your browser until you figure out the basics. Fire the link and start dragging and dropping component code around the place. You can work in the Playground for as long as you like. You can use it to just get a taste of NativeScript development or to develop your entire project inside. However, when you get to the point where you are ready to put your app out there, you need to jump on the more advanced wagon and install NativeScript tools locally and then pick a template to start with. This page consists of two parts:. Firing this link gets you to a simple code editor in the cloud where a very basic NativeScript + Vue.js template is pre-loaded for you. TIP: Head to Sample Tasks for the Playground for ideas about how to get started in the Playground. If this is your first time here, the Playground prompts you to install a couple of mobile apps—the NativeScript Playground and the NativeScript Preview. Together they let you see your code changes applied in real time on device. No code building and bundling required. You can ignore this step but without it, you'll miss most of the fun and excitement of playing around with Vue.js and NativeScript. Keep the apps running while you're experimenting with the code. The left sidebar offers a file explorer and a Components panel. Most of your effort on your app will happen in components >HelloWorld.vue, where you'll be creating the user interface and the business logic behind it.