Basic knowledge of vue. js declarative rendering and condition and loop, basic knowledge of vue. js

Basic knowledge of vue. js declarative rendering and condition and loop, basic knowledge of vue. js

The specific content of vue. js declarative rendering and conditions and loops will be shared with you.

Bind DOM element text value

Html code:

<div id="app"> {{ message }}</div>

JavaScript code:

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})

Running result: Hello Vue!

Summary:The data and DOM are already associated. When we change the data of app. message, the rendered DOM elements are updated accordingly.

Bind DOM element attributes

Bind the title attribute of the span element with the v-bind command.

Html code:

<Div id = "app-2"> <span v-bind: title = "message"> hover the mouse over here for a few seconds, you can see the dynamic bound title here! </Span> </div>

JavaScript code:

Var app2 = new Vue ({el: '# app-2', data: {message: 'page loaded on' + new Date ()}})

Running result:

Summary:The v-bind attribute is called an instruction and is a special attribute provided by Vue. It is used to "update the title attribute of this element in association with the message attribute of the Vue instance ". When we change the value of app2.message, elements bound with the title attribute will be updated.

Condition

Use the v-if command to determine the condition

Html code:

<Div id = "app-3"> <p v-if = "seen"> now you can see me </p> </div>

JavaScript code:

var app3 = new Vue({ el: '#app-3', data: { seen: true }})

Running result: You can see me

Summary:When we change the value of app3.seen to false, we will see that span disappears. We can not only bind data to text and attributes, but also bind data to the DOM structure. This allows you to insert, update, and delete elements through data changes.

Loop

The v-for command can use the data in the array to display a project list.

Html code:

<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol></div>

JavaScript code:

Var app4 = new Vue ({el: '# app-4', data: {todos: [{text: 'learn JavaScript '}, {text: 'learn Vue '}, {text: 'create exciting Code'}]})

Running results: 1. Learn JavaScript
2. Learn Vue
3. Create exciting code

In the console, enter app4.todos. push ({text: 'New item'}), and you will see a new item appended to the list.
Summary:Data can be used to determine the length and content of our project list, thus reducing the amount of html code.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.