Vue.js rendering and loop knowledge explanation

This article mainly introduces the basic knowledge of vue.js declarative rendering and conditions and loops in detail. It has certain reference value. Interested friends can refer to

vue.js The specific content of declarative rendering, conditions and loops is shared with everyone

Binding DOM element text value

html code:

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

JavaScript code:

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

Run result: Hello Vue!

Summary: Data and DOM have been Being linked together, when we change the data of app.message, the rendered DOM element will be updated accordingly.

Bind DOM element attributes

Use the v-bind directive to bind the title attribute of the span element

html code:

<p id="app-2">
 <span v-bind:title="message">
 鼠标悬停此处几秒，
 可以看到此处动态绑定的 title！
 </span>
</p>

JavaScript code:

var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '页面加载于 ' + new Date()
 }
})

Running result:

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

Conditions

Use v-if instruction to determine conditions

html code:

<p id="app-3">
 <p v-if="seen">现在你可以看到我</p>
</p>

JavaScript code:

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

Running results: You can see my

Summary: When we put the value of app3.seen After changing it to false, we will see that span disappears. It shows that we can not only bind data to text and attributes, but also bind data to DOM structures. This enables insertion/update/deletion operations of elements through changes in data.

Loop

v-for instruction can use the data in the array to display a list of items

html code:

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

JavaScript code:

##

var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
 { text: '学习 JavaScript' },
 { text: '学习 Vue' },
 { text: '创建激动人心的代码' }
 ]
 }
})

Run 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 added to the list.

Summary: The length and content of our project list can be determined through data, thereby reducing the amount of html code

The above is the detailed content of Vue.js rendering and loop knowledge explanation. For more information, please follow other related articles on the PHP Chinese website!