How to use the v-model instruction in Vue.js
Today, I would like to share with you the relevant knowledge points about how to use the v-model instruction in Vue.js. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.
I. v-model instruction
V-model is used to get the value of the form element. The corresponding input input box gets the input value, while the radio button, check box, and drop-down box get the status of the selection.
Use v-model to create two-way bindings on a form control or component.
The code example is as follows:
V-model directive _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {inputValue: "hello world", chkState:true, / / defaults to true chkArray: ["1"] / / processing grouped check boxes requires defining an array For the value of each CheckBox, the second chkLists is selected by default: [{displayName: "popular Science Books", value: "0"}, {displayName: "Primary and Secondary School textbooks", value: "1"}, {displayName: "computer Science", value: "2"}], rdoCheck: "1" / / dynamic processing radio radioLists: [{name: "Gender", value: "1", displayName: "male"}, {name: "Gender", value: "2", displayName: "female"}], sectionValue: "banana", / / No value The default value is name sectionValue1: "0", optionLists: [{value: "0", displayName: "Apple"}, {value: "1", displayName: "banana"}, {value: "2", displayName: "Grape"}]} / / method methods: {}, filters: {toShowCheckBoxState:function (value) {return value==true? " Check ":" unchecked "})} {{inputValue}} current selected status: {{chkState | toShowCheckBoxState}} sing, dance, play basketball
Currently selected value: {{chkArray}}
{{list.displayName}} male and female
{{rdoCheck}}
{{list.displayName}}
{{rdoCheck}}
Apple banana grape
{{sectionValue}}
Apple banana grape
{{sectionValue1}}
{{list.displayName}}
{{sectionValue1}}
II. Examples of v-model instructions
The following code uses the v-model instruction to select all:
V-model instruction _ window.onload = function () {var vm = new Vue ({el:'#my', data: {checkAll: {name:' all selected', check:false}, lists: [{name:' Xiaomi', check:true}, {name:' Huawei', check:false}) {name:' Apple', check:false}, {name:' ZTE', check:false}, {name:'OPPO',check:false}]} Methods: {checkAllChange:function () {vm.lists.forEach (function (item) {item.check = vm.checkAll.check) });}, curChange:function () {/ / true status var curTure = this.lists.filter (function (item) {return item.check = = true;}); curTure.length = = this.lists.length? This.checkAll.check = true: this.checkAll.check = false })} {{checkAll.name}} {{checkAll.check}} {{list.name}} {{list.check}} above is "v-model in Vue.js" How to use all the contents of this article Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
