Declarative rendering and specific contents of conditions and loops, share with everyone
Bind DOM element text value
html code:
<div >
{{ message }}
</div>
JavaScript code:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Running result: Hello Vue!
Summarize:The data and DOM have been associated with each other, and when we change the data, the rendered DOM elements will be updated accordingly.
Bind DOM element attributes
Use the v-bind directive to bind the title attribute of the span element
html code:
<div > <span v-bind:title="message"> Hover over here for a few seconds， You can see the dynamic binding here title！ </span> </div>
JavaScript code:
var app2 = new Vue({
el: '#app-2',
data: {
message: 'Page loaded on' + new Date()
}
})
Running results:
Summarize:The v-bind attribute is called a directive, which is a dedicated attribute provided by Vue. The function of this directive is: "Keep the title attribute of this element with the message attribute of the Vue instance and update it." When we change the value, the element bound to the title attribute will be updated.
condition
Use the v-if command to determine the conditions
html code:
<div > <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
Summarize:When we change the value to false, we will see span disappear. This shows that we can not only bind data to text and properties, but also to DOM structures. This enables the insertion/update/deletion of elements through data changes.
cycle
v-for directive, which uses data in an array to display a list of items
html code:
<div >
<ol>
<li v-for="todo in todos">
{{ }}
</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, type ({ text: ‘new item’ }) and you will see a new item appended to the list.
Summarize:The length and content of our project list can be determined through data, thereby reducing the amount of HTML code
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.