技术标签： 前端 vue.js javascript v-model
所谓双向绑定就是：
数据改变后，呈现的页面结果会更新
页面结果更新后，数据也会随之而变
作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容
语法：v-model=“变量”
**需求：**使用双向绑定实现以下需求
点击登录按钮获取表单中的内容
点击重置按钮清空表单中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--
v-model 可以让数据和视图，形成双向数据绑定
(1) 数据变化，视图自动更新
(2) 视图变化，数据自动更新
可以快速[获取]或[设置]表单元素的内容
-->
账户：<input type="text" v-model="username"> <br><br>
密码：<input type="password" v-model="password"> <br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login () {
console.log(this.username, this.password)
},
reset () {
this.username = ''
this.password = ''
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
display: block;
width: 240px;
height: 100px;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="app">
<h3>小黑学习网</h3>
姓名：
<input type="text" v-model="username">
<br><br>
是否单身：
<input type="checkbox" v-model="isSingle">
<br><br>
<!--
前置理解：
1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥
2. value: 给单选框加上 value 属性，用于提交给后台的数据
结合 Vue 使用 → v-model
-->
性别:
<input v-model="gender" type="radio" name="gender" value="1">男
<input v-model="gender" type="radio" name="gender" value="2">女
<br><br>
<!--
前置理解：
1. option 需要设置 value 值，提交给后台
2. select 的 value 值，关联了选中的 option 的 value 值
结合 Vue 使用 → v-model
-->
所在城市:
<select v-model="cityId">
<option value="101">北京</option>
<option value="102">上海</option>
<option value="103">成都</option>
<option value="104">南京</option>
</select>
<br><br>
自我描述：
<textarea v-model="desc"></textarea>
<button>立即注册</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
isSingle: false,
gender: "2",
cityId: '102',
desc: ""
}
})
</script>
</body>
</html>
父组件通过v-model 简化代码，实现子组件和父组件数据 双向绑定
v-model其实就是 :value和@input事件的简写
<template>
<div>
<select :value="value" ="selectCity">
<option value="101">北京</option>
<option value="102">上海</option>
<option value="103">武汉</option>
<option value="104">广州</option>
<option value="105">深圳</option>
</select>
</div>
</template>
<script>
export default {
props: {
value: String,
},
methods: {
selectCity(e) {
this.$emit('input', e.target.value)
},
},
}
</script>
<style>
</style>
<template>
<div class="app">
<BaseSelect
v-model="selectId"
></BaseSelect>
</div>
</template>
<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
data() {
return {
selectId: '102',
}
},
components: {
BaseSelect,
},
}
</script>
<style>
</style>
v-model本质上是一个语法糖。例如应用在输入框上，就是value属性 和 input事件 的合写
<template>
<div id="app" >
<input v-model="msg" type="text">
<input :value="msg" @input="msg = $event.target.value" type="text">
</div>
</template>
提供数据的双向绑定
$event 用于在模板中，获取事件的形参
<template>
<div class="app">
<input type="text" />
<br />
<input type="text" />
</div>
</template>
<script>
export default {
data() {
return {
msg1: '',
msg2: '',
}
},
}
</script>
<style>
</style>
不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model
底层处理的是 checked属性和change事件。
不过咱们只需要掌握应用在文本框上的原理即可
文章浏览阅读920次。 RAS3，做nat，又是table full ，导致客户机上网奇慢无比，其实已经把ip_conntrack_max设得很大了，但是还是出了这样的问题，google找到一个解决办法。暂用测试 到http://www.hping.org/download.html 下载hping2，我下的是rc3了 tar xvfz hping2.0.0-rc3.tar.g_padavan table full
文章浏览阅读478次。1.浮点类型 类型 占用存储空间 表述范围 float 4字节 -3.403E38~3.403E38 double 8字节 -1.798E308~1.798E308 float 单精度浮点型，尾数可以精确到7位有效数字 double 双精度浮点型，数值精度为float的两倍；_浮点类型 误差
本文主要介绍了轻量化神经网络在硬件部署方面的需求，并讨论了在提高FPGA带宽和利用率方面的挑战和发展趋势。此外，还提出了人工智能产品对快速计算的要求。
文章浏览阅读218次。mysql语句启动mysql services.msc登录mysql -uroot -proot退出exitmysql 数据库操作数据库表格操作修改表删除表表-数据-增删改查条件查询 （复杂）连接查询（连表查询）子查询 （一个查询的结果作为另一个查询的一部分）启动mysql services.msc登录mysql -uroot -proot退出exitmysql 数据库操作登录mysql -uroot -prootquit/exit查看当前使用数据库： select database();_mysql服务启动语句
文章浏览阅读1.3k次。当网站地址变更时，需要将旧域名301重定向到新的URL地址，实际上就是把旧地址的访问请求重新引导到新域名上。301永久重定向无论是对用户还是搜索引擎都是比较友好的，对SEO完全没有不好的一面。通过旧网站的关键词排名和PR等级都会传递给新网站，网站更换了域名，用域名301永久重定向的方式告诉搜索引擎本网页已经永久性转移到新的域名，避免搜索引擎无法找到页面，网站对于搜索引擎相对比较友好。域名重定向的好..._一个域名301重定向到另一个域名的url上
文章浏览阅读1.4k次，点赞2次，收藏11次。【软考-软件设计师精华知识点笔记】第八章 算法分析设计_软考决策树
文章浏览阅读724次。.export_box{ background: #fff; .export_box_header{ color:red; &:hover { color: #235FB8; } } .export_box_main &{ border-color: #235FB8; }}转化为CSS效果：.export_box{ background: #fff; } .ex_less中&.red
文章浏览阅读91次。从oracle11g开始，支持windows与linux异构dg，同时也开时支持备节点只读打开。所以在企业中，可以实现读写分离，客户知道这个新特性后，要求我们帮他们部署一套这样的active dataguard，来分担他们生产库的压力。下面，我就把我的实施过程发布出来与大家共享！1、安装操作系统及数据库软件具体的安装、建库等操作2、开始配置..._activedataguard
文章浏览阅读1w次，点赞34次，收藏216次。python网络编程_python网络编程
文章浏览阅读2.4k次，点赞21次，收藏80次。????数据结构以前是用java学习的，那都是大一大二的事情了，早忘的差不多了，前段日子刷力扣的数据结构有点忘了，于是打算近期捡起来，让我们用python学习一遍。1.数据是什么？在 Python 以及其他所有面向对象编程语言中，类都是对数据的构成(状态)以及数据 能做什么(行为)的描述。由于类的使用者只能看到数据项的状态和行为，因此类与抽象数据类 型是相似的。在面向对象编程范式中，数据项被称作对象。一个对象就是类的一个实例。2.数据类型2.1内建原子数据类型Python 有两大內建数据类实现了整_python 结构体数据类型定义
文章浏览阅读607次。import numpy as npimport matplotlib.pyplot as pltfrom scipy.optimize import curve_fit#用python拟合函数最主要模块就是cure_fit#准备数据x=[一组数据]y=[一组数据]#定义你自己想要拟合的函数def func(x,E0,B0,B1,V0):return E0+(9.0/16)*V0*B0*(((V0..._用python怎么拟合出周期函数
文章浏览阅读403次。Android 解决TextView排版参差不齐的问题在app中，展示数据时，里面有汉字、数字、特殊字符时，由于全角、半角问题导致TextView参差不齐。在网上找了许多，半角转全角并没什么用，还有其他自定义TextView都有问题。最后终于找到一个，就像Word一样，可以使文字左右两端对齐：package com.monkey.monkeymushroom.view;import android..._android textview文本偏上