Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.