Home >Web Front-end >JS Tutorial >Summary of native directives in Vue.js (code)
This article brings you a summary (code) of native instructions in Vue.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Directory:
v-text v-html v-show/v-if v-for v-bind/v-on v-model v -once
Bind the content to be displayed to the tag
new Vue({ el: '#id', template: `<p v-text="'value:'+val"></p>`, data: { val: '123' } })// 等同于 : template: `<p>value:{{val}}</p>`
When bound A certain value is displayed as an HTML value instead of a string (similar to converting innerText to innerHtml)
new Vue({ el: '#id', template: `<p v-html="val"></p>`, data: { val: '<span>123</span>' } })
receive a boolean variable and determine Whether the node is displayed.
Difference:
v-show: Add a display:none to the node
v-if: Determine whether the node exists. If false, the node does not exist, which will cause the DOM node to be redrawn
new Vue({ el: '#id', template: `<p> <span v-show="active"></span> <span v-if="active"></span> </p>`, data: { active: false, text: 0 } // <span v-if="active"></span> // <span v-else-if="text === 0"></span> // <span v-if="active"></span>})
Loop over an array (or object)
new Vue({ el: '#id', template: `<p> <ul> // 遍历数组 <li v-for="(item,index) in arr" :key="item">{{item}}</li> </ul> <ul> // 遍历对象 <li v-for="(val,key,index) in obj1" :key="key">{{key}} : {{val}}</li> </ul> </p>`, data: { arr: [1, 2, 3], obj1: { a: '123', b: '456' c: '789' } } })
v-bind: Single Bind data
v-on: Bind event
// v-bind<p v-bind:class="val"></p>// 简写方式:<p :class="val"></p>// 其中val是data中的数据 // v-on<p v-on:click="clickButh"></p>// 简写方式:<p @click="clickButh"></p>// 其中clickButn是methods中的方法
Bind data in two directions
new Vue({ el: '#id', template: `<p> <input type="text" v-model="val"> </p>`, data: { val: '111' } })
Only bind once, when the bound data changes, the data on the node will not change again
new Vue({ el: '#id', template: `<p v-once >Text: {{val}}</p>`, data: { val: '111' } })
Related recommendations:
The above is the detailed content of Summary of native directives in Vue.js (code). For more information, please follow other related articles on the PHP Chinese website!