V-model指令
文章目录
- 01、参考官网：
- v-model指令
- Vue为什么说是：双向数据绑定
- v-model的作用范围
- 01、基础用法
- 02、友情提示
- 02、单输入框--text
- 格式
- javascipt获取值的方式
- jQuery写法获取值的方式
- vue获取的的写法--直接获取
- vue获取的的写法--增强处理
- lazy
- trim（==推荐必须掌握==）
- number（==推荐必须掌握==）
- 03、多行输入 - textarea
- 格式
- javascipt获取值的方式
- jQuery写法获取值的方式
- vue获取的的写法--直接获取
- 04、关于label妙用
- label和form元素的化学反应
- 05、复选框
- 格式
- javascipt获取值的方式
- jQuery写法获取值的方式
- vue获取的的写法--直接获取
- 回填数据
- 获取value和文本
- 默认规则
- 06、单选框
- 格式
- javascipt获取值的方式
- jQuery写法获取值的方式
- vue获取的的写法--直接获取
- 获取value和文本
- 默认规则
- 07、select框
- 注意事项
- 格式
- javascipt获取值的方式
- jQuery写法获取值的方式
- vue获取的的写法--直接获取
- 补充label妙用
01、参考官网：
https://v3.cn.vuejs.org/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95
v-model指令
01：文本指令：v-html / v-text 和插值表达式，名字也必须定义在data中。==
02：事件指令：v-on:click=”事件名”，缩写：@click=”事件名”，注：事件名定义在：methods中
03：属性指令：v-bind:属性名=”data的key” 缩写 : 属性名=”data的key” .注意动静拼接的问题
04：控制指令：v-model=”data的key”，用于获取form控制元素的值。如果的多余3个建议使用对象去定义和获取
05：循环指令：v-for =”(obj,index) in data” 中定义数组的名字” 。
06：条件指令：v-if / v-else-if /v-else 注意中间不能出现标签，否则会出现断层。
07：显示指令：v-show 控制元素的隐藏和显示。（鼠标事件 + v-show /v-if选项卡）
08：渲染指令：v-cloak
09：其他指令：v-pre / v-once（== 用的非常的少==）
10、槽指令：v-slot(后续自定义组件使用，自定义代码块的机制)（暂时忽略）
Vue为什么说是：双向数据绑定
就是体现在这个指令上：v-model
因为v-model是唯一一个可以改变视图----改变数据的指令
v-model的作用范围
v-model指令：只能用在form表元素上( input text,password,checkbox ,radio) ,textarea, select。
除了这些元素意外都不能使用v-model。比如：
<div v-model="username">div>
01、基础用法
你可以用 v-model 指令在表单 、
doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>18、表单属性指令-v-model-多行入框.htmltitle>
head>
<body><div id="app"><textarea v-model.lazy.trim.number="intro" style="height: 200px;width: 400px;resize:none;">textarea><h1>你输入的字符长度是：{{intro.length}}h1><button @click="loginbtn">登录button>
div><script src="js/vue.global.js">script>
<script>var vm = Vue.createApp({created(){},data() {return {intro:"你好"}},methods:{loginbtn(){var intro = this.intro;alert("你获取的内容是:" + intro)}}}).mount("#app");
script>body>
html>
04、关于label妙用
label和form元素的化学反应
doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>18、表单属性指令-v-model-多行入框.htmltitle>
head>
<body><div id="app"><p><label for="username">用户名：label><input type="text" id="username">p><p><label>用户名：<input type="text" id="username2">label>p><hr><p><label><input type="checkbox" name="hobbys" value="1">篮球label>p><p><label><input type="checkbox" name="hobbys" value="2">足球label>p><p><label><input type="checkbox" name="hobbys" value="3">羽毛球label>p><p><input type="checkbox" name="hobbys" id="hobbys1" value="1"><label for="hobbys1">篮球label>p><p><input type="checkbox" name="hobbys" id="hobbys2" value="2"><label for="hobbys2">足球label>p><p><input type="checkbox" name="hobbys" id="hobbys3" value="3"><label for="hobbys3">羽毛球label>p><hr><p><label><input type="radio" name="gender" value="0">女label>p><p><label><input type="radio" name="gender" value="1">男label>p><p><label><input type="radio" name="gender" value="2">保密label>p><hr><p><input type="radio" name="gender" id="gender0" value="0"><label for="gender0">女label>p><p><input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男label>p><p><input type="radio" name="gender" id="gender2" value="2"><label for="gender2">保密label>p>div>body>
html>
被label包裹或者用for指定元素，可以直接选中文件进行焦点的获取。
- 所以在开发中你指定为什么前端都喜欢用label标签去包裹form元素，就是因为有这样的化学反应。
- 同时也告诉你一个道理，如果要增强用户体验，你未来的开发中，尽量用label去包裹元素。
05、复选框
格式
<form action="" id="form"><p><input type="checkbox" value="篮球" name="hobbys"><label>篮球label>p><p><input type="checkbox" value="足球" name="hobbys" checked><label>足球label>p><p><input type="checkbox" value="羽毛球" name="hobbys" ><label>羽毛球label>p>
form>
javascipt获取值的方式
# 获取所有
var formdom = document.getElementById("form");
var hobbysarr = formdom.hobbys;
var arr = [];
for(var i=0;i<hobbysarr.length;i++){arr.push(hobbysarr[i].value);
}
alert(arr)#获取选中的
var formdom = document.getElementById("form");
var hobbysarr = formdom.hobbys;
var arr = [];
for(var i=0;i<hobbysarr.length;i++){if(hobbysarr[i].checked) {arr.push(hobbysarr[i].value);}
}
alert(arr)jQuery写法获取值的方式
# 所有，不管选中不选中
var hobbys = $("input[type='checkbox'][name='hobbys']").val();
# 获取选中的
var hobbys = $("input[type='checkbox'][name='hobbys']:checked").val();
vue获取的的写法–直接获取
<div id="app"><p><input type="checkbox" v-model="hobbys" value="篮球" id="hobbys1"><label for="hobbys1">篮球label>p><p><input type="checkbox" v-model="hobbys" value="足球" id="hobbys2"><label for="hobbys2">足球label>p><p><input type="checkbox" v-model="hobbys" value="羽毛球" id="hobbys3" ><label for="hobbys3">羽毛球label>p><p>你选择的元素是：{{hobbys}}p>
div>
doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>18、表单属性指令-v-model-checkbox复选框.htmltitle>
head>
<body><div id="app"><p><input type="checkbox" v-model="hobbys" value="篮球" id="hobbys1"><label for="hobbys1">篮球label>p><p><input type="checkbox" v-model="hobbys" value="足球" id="hobbys2"><label for="hobbys2">足球label>p><p><input type="checkbox" v-model="hobbys" value="羽毛球" id="hobbys3"><label for="hobbys3">羽毛球label>p><p>你选择的元素是：{{hobbys}}p>
div><script src="js/vue.global.js">script>
<script>var vm = Vue.createApp({created(){},data() {return {hobbys:[]}},methods:{loginbtn(){var intro = this.intro;alert("你获取的内容是:" + intro)}}}).mount("#app");
script>body>
html>
回填数据
如果你要回调数据的话，直接改变hobbys数组即可
data() {return {hobbys:["篮球","羽毛球"]}},
获取value和文本
doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>18、表单属性指令-v-model-checkbox复选框.htmltitle>
head>
<body><div id="app"><p v-for="(item,index) in hobbysArr" :key="item.id"><input type="checkbox" v-model="hobbys" v-bind:value="item" :id="'hobbys'+index"><label :for="'hobbys'+index">{{item.name}}label>p><p>你选择的元素是：{{hobbys}}p>
div><script src="js/vue.global.js">script>
<script>var vm = Vue.createApp({created(){},data() {return {hobbys:[],hobbysArr:[{id:1,name:"篮球1"},{id:2,name:"篮球2"},{id:3,name:"篮球3"}]}},methods:{loginbtn(){var intro = this.intro;alert("你获取的内容是:" + intro)}}}).mount("#app");
script>body>
html>
默认规则
如果你data模型中数据值和value一致，checked会自动选中。
06、单选框
格式
<form action="" id="form"><p><input type="radio" value="男" name="gender"><label>男label>p><p><input type="radio" value="女" name="gender" checked><label>女label>p><p><input type="radio" value="保密" name="gender" ><label>保密label>p>
form>
javascipt获取值的方式
# 获取所有
var formdom = document.getElementById("form");
var genderArr = formdom.gender;
var arr = [];
for(var i=0;i<genderArr.length;i++){arr.push(genderArr[i].value);
}
alert(arr)# 选中的取出来
var formdom = document.getElementById("form");
var genderArr = formdom.gender;
var arr = [];
for(var i=0;i<genderArr.length;i++){if(genderArr[i].checked){arr.push(genderArr[i].value);}
}
alert(arr[0])jQuery写法获取值的方式
# 所有，不管选中不选中
var gender = $("input[type='radio'][name='gender']").val();
# 获取选中的
var gender = $("input[type='radio'][name='gender']:checked").val();
var gendertext = $("input[type='radio'][name='gender']:checked").next().text();
vue获取的的写法–直接获取
doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>18、表单属性指令-v-model-radio单选框.htmltitle>
head>
<body><div id="app"><p><input type="radio" v-model="gender" value="男" id="male"><label for="male">男label>p><p><input type="radio" v-model="gender" value="女" id="female"><label for="female">女label>p><p><input type="radio" v-model="gender" value="保密" id="baomi" ><label for="baomi">保密label>p><p>你选择的元素是：{{gender}}p>
div><script src="js/vue.global.js">script>
<script>var vm = Vue.createApp({created(){},data() {return {gender:""}},methods:{loginbtn(){var intro = this.gender;alert("性别是:" + gender)}}}).mount("#app");
script>body>
html>
获取value和文本
doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>18、表单属性指令-v-model-radio单选框-02.htmltitle>
head>
<body><div id="app"><p><input type="radio" v-model="gender" :value="genderArr[0]" id="male"><label for="male">男label>p><p><input type="radio" v-model="gender" :value="genderArr[1]" id="female"><label for="female">女label>p><p><input type="radio" v-model="gender" :value="genderArr[2]" id="baomi" ><label for="baomi">保密label>p><p>你选择的元素是：{{gender.gender}}，{{gender.name}}p>
div><script src="js/vue.global.js">script>
<script>var vm = Vue.createApp({created(){},data() {return {gender:"",genderArr:[{id:1,gender:1,name:"男"},{id:2,gender:0,name:"女"},{id:3,gender:2,name:"保密"}]}},methods:{loginbtn(){var intro = this.gender;alert("性别是:" + gender)}}}).mount("#app");
script>body>
html>
默认规则
如果你data模型中数据的值和value一致，checked会自动选中。
07、select框
注意事项
- 如果select的option的value不指定，那么value等text。建议大家不要搞迷惑行为。
- value和text不一致的情况下
格式
<select id="education" onchange="changeEducation(this)"><option value="">--请选择学历--option><option value="1">小学option><option value="2">初中option><option value="3">高中option><option value="4">本科option><option value="5">硕士option><option value="6">博士option>select>
javascipt获取值的方式
function changeEducation(obj){// 1:获取 select元素本身var selectDom = obj; // document.getElementById("education");// 2: 获取选中的options的索引var selectIndex = selectDom.selectedIndex;// 3: 根据索引找到select中索引为selectedIndex的optionvar optionDom = selectDom.children[selectIndex]; // selectDom.options[selectIndex];alert(optionDom.value +"==="+optionDom.text)
}jQuery写法获取值的方式
## 获取value
var education = $("#education").val();
var education = $("#education").find("option:selected").val();
## 获取文本
var educationtext = $("#education").find("option:selected").text();
vue获取的的写法–直接获取
doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>18、表单属性指令-v-model-select元素.htmltitle>
head>
<body><div id="app"><h3>单选选择框h3><select v-model="education"><option value="">---请选择学历---option><option v-for="(option,index) in options" v-bind:value="option">{{option.atxt}}option>select><p>你获取的学历是：{{education.aval}} == {{education.atxt}}p>
div><script src="js/vue.global.js">script>
<script>var vm = Vue.createApp({created() {},data() {return {education: "",options:[{aval:1,atxt:"小学"},{aval:2,atxt:"初中"},{aval:3,atxt:"高中"},{aval:4,atxt:"本科"},{aval:5,atxt:"硕士"},{aval:6,atxt:"博士"}]}},methods: {}}).mount("#app");
script>body>
html>
补充label妙用
doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>18、表单属性指令-v-model-多行入框.htmltitle>
head>
<body><div id="app"><p><label for="username">用户名：label><input type="text" id="username">p><p><label>用户名：<input type="text" id="username2">label>p><hr><p><label><input type="checkbox" name="hobbys" value="1">篮球label>p><p><label><input type="checkbox" name="hobbys" value="2">足球label>p><p><label><input type="checkbox" name="hobbys" value="3">羽毛球label>p><p><input type="checkbox" name="hobbys" id="hobbys1" value="1"><label for="hobbys1">篮球label>p><p><input type="checkbox" name="hobbys" id="hobbys2" value="2"><label for="hobbys2">足球label>p><p><input type="checkbox" name="hobbys" id="hobbys3" value="3"><label for="hobbys3">羽毛球label>p><hr><p><label><input type="radio" name="gender" value="0">女label>p><p><label><input type="radio" name="gender" value="1">男label>p><p><label><input type="radio" name="gender" value="2">保密label>p><hr><p><input type="radio" name="gender" id="gender0" value="0"><label for="gender0">女label>p><p><input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男label>p><p><input type="radio" name="gender" id="gender2" value="2"><label for="gender2">保密label>p>
div>body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！