Using v | 您所在的位置:网站首页 › vue bind › Using v |
Tutorials
/
Vue
/
Using v-bind in Vue
Aug 9, 2019
In Vue, v-bind lets you bind an HTML attribute to a JavaScript expression. There are two broad use cases for this one-way data binding: Binding to built-in attributes, like href or class Passing props to a child component Binding to Built-in AttributesYou can use v-bind to bind built-in HTML attributes to JavaScript expressions. For example, you can make a link whose href is bound to a data field. When the link field changes, so does the href. const app = new Vue({ data: () => ({ link: 'http://google.com' }), // Initially, the link will go to Google... template: ` My Link ` }); // Now, the link will go to Twitter. app.$data.link = 'http://twitter.com';You can use this syntax for some cool use cases, including dynamic inline style attributes. const app = new Vue({ data: () => ({ color: 'blue' }), // Initially, will show "blue text" in blue font. template: ` {{color}} text ` }); // Now, it will show "green text" in green font. app.$data.color = 'green'; PropsYou can also use v-bind to pass props to child components. // `props` is an array of prop names this component accepts. If you // don't explicitly list a prop in `props`, you won't be able to use // it in your template. Vue.component('hello', { props: ['name'], template: 'Hello, {{name}}' }); // The app tracks `name` as internal state, and there's an input to // modify `name` using `v-model`. Then, `v-bind:name` passes `name` as // a prop to the `hello` component. const app = new Vue({ data: () => ({ name: 'World' }), template: ` ` }); ShorthandThe v-bind part of v-bind:prop is optional. You can also use :prop. Most large Vue codebases use :prop and avoid typing out v-bind. const app = new Vue({ data: () => ({ link: 'http://google.com' }), // `:href` is the same ad `v-bind:href`, just more concise. template: ` My Link ` }); Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!Did you find this tutorial useful? Say thanks by starring our repo on GitHub! More Vue Tutorials Methods in Vue Use the Ternary Operator for Conditionals in Vue Vue Email Validation How to Copy Content to the Clipboard in Vue Creating Computed Properties with Vue's Composition API Toggle Visibility in Vue Add Global Variables to Vue JS Templates |
CopyRight 2018-2019 实验室设备网 版权所有 |