• 数据双向绑定数据(v-model)

    概述：

    ​ Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

    注意：

    1. 双向绑定, 只能绑定“文本框,单选按钮,复选框,文本域,下拉列表”等
    2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型
    3. 单个复选框, 绑定的是boolean类型
    4. 多个复选框, 绑定的是数组
    5. select单选对应字符串，多选对应也是数组

    绑定文本框

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu">
		<meta name="generator" content="HBuilder X">
		<title>绑定文本框title>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			用户名: <input type="text" v-model="username"/>
		div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					username:""
				}
			});
		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    绑定单个复选框

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu">
		<meta name="generator" content="HBuilder X">
		<title>绑定单个复选框title>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<input type="checkbox" v-model="agree" />同意<br />
		div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					agree:true;
				}
			});
		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    绑定多个复选框

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>绑定多个复选框title>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<input type="checkbox" value="Java" v-model="language" />Java<br />
			<input type="checkbox" value="Python" v-model="language" />Python<br />
			<input type="checkbox" value="Swift" v-model="language" />Swift<br />
		div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					//数组中的值,就是被选中的元素的value属性值
					language:["Java","Python"]
				}
			});
		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    form表单数据提交
    传json格式跟formData格式的两种情况

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>form表单数据提交title>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8">script>
		<style type="text/css">
			.from_box{
				form{
					width:90%;
					margin: auto;
					border:.01rem solid gray;
					display: flex;
					flex-wrap: wrap;
					input{
						width:80%;
						height:.5rem;
						margin-bottom: .2rem;
						border:.01rem solid black;
						height:.5rem;
					}
				}
				.but{
					font-size: .14rem;
					margin-left:5%;
				}
			}
		style>
	head>
	<body>
		
		<template>
			<div class="form_box">
				<form action="">
					<input type="text"  placeholder="请输入昵称" v-model="formMess.account">
					<input type="password" placeholder="请输入密码" v-model="formMess.act_pwd">
					<input type="text" placeholder="请输入手机号" v-model="formMess.phone">
				form>
				<span class="but" @click="onSubmit()">提交span>
			div>
		template>
		<script type="text/javascript">
			import axios from 'axios';
			export default{
				name:"form",
				data:{
					formMess:{
						"account":"",
						"act_pwd":"",
						"phone":""
					}
				};
			},
			methods:{
				onSubmit(){
					/* json格式提交： */
					let formData = JSON.stringify(this.formMess);
					/* formData格式提交： */
					let formData = new FormData();
					for(var key in this.formMess){
						formData.append(key.this.formMess[key]);
					}
					axios({
						method:"post",
						url:"XXXXXXX",
						headers:{
							"Content-Type":"multipart/form-data"
						},
						withCredentials:true,
						data:formData
					}).then((res)=>{
						console.log(res)
					});
				}
			}
		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
  • 相关阅读:
    本地搭建MQTT服务器(windows和树莓派)
    C#使用TcpListener进行聊天通信
    定时任务调度（crond）
    css实现滚动条一直显示，并且实现滚动条样式的修改
    C语言统计成绩
    异步爬虫实战：实际应用asyncio和aiohttp库构建异步爬虫
    快来生成你专属的英文名吧(使用字符级RNN)！
    Excel VSTO开发9 -使用Form窗口
    【定时器】企业微信群定时发送消息简单实现
    【Python深度学习】深度学习入门介绍
  • 原文地址：https://blog.csdn.net/weixin_55804957/article/details/128073066