The content shared with you in this article is a summary of commonly used instructions in Vue. The content is very detailed. Next, let’s take a look at the specific content. I hope it can help friends in need.
1 Commonly used commands
v-if command
v-show command
v-else instruction
v-for instruction
v-bind instruction
v-model
v-on command
v-text command
1.1 v-if is a conditional rendering instruction, which deletes and inserts elements based on the true or false expression. Its basic syntax is as follows:
v-if="expression"
expression is an expression that returns a bool value. Expression The formula can be a bool attribute or an operation formula that returns bool. For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>The display result is as follows,
Note: v-if instruction is executed based on the value of the conditional expressionInsertion or deletion behavior of elements.
1.2 v-for directive
v-for directive renders a list based on an array, which is similar to JavaScript’s traversal syntax :
v-for="item in items"
items is an array, item is the array element currently being traversed.
Sample code:
name
age
{{item.name}}
{{item.age}}
1.3 The v-bind directive can take a parameter after its name, separated by a colon. This parameter is usually an attribute of the HTML element, for example ：v-bind:class
v-bind:argument="expression"
1.4 v-model