vue指令之表单控件绑定v-model v-model与v-bind结合使用
作者:anyxl 发布时间:2023-07-02 16:28:15
标签:vue,指令,表单,v-model,v-bind
一、表单控件绑定v-model
v-model 双向数据绑定;一般用于表单元素,会忽略表单元素的value、checked、selected
的初始值,且将Vue实例的数据作为数据来源。
① 单行文本框 input[type="text"]
、多行文本框 textarea:
v-model值绑定到value属性;
<body>
<div id="app">
<input type="text" v-model="username" value="我是初始值,但是我被忽略了"><br/>
<textarea v-model="schoolname" value="我是初始学校:北大青鸟"></textarea><br/>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
username:'小鸣',
schoolname:'XX科技大学'
}
})
</script>
</body>
ps:下面看下Vue v-bind v-model的使用
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据
最基础的就是实现一个联动的效果
<body>
<div class="app">
<span>Multiline message is:</span>
<p>{{message}}</p>
<br>
<textarea name="" v-model="message" placeholder="please write..."></textarea>
</div>
</body>
<script>
new Vue({
el:'.app'
})
</script>
checkbox
<body>
<div class="app">
<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" id="John" value="John" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
<label for="jack">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>
</body>
<script>
new Vue({
el:'.app',
data:{
checkedNames:[]
}
})
</script>
v-bind
有些指令可以在其名称后面带一个“参数” (Argument),中间放一个冒号隔开。例如,v-bind 指令用于响应地更新 HTML 特性
总结
以上所述是小编给大家介绍的vue指令之表单控件绑定v-model v-model与v-bind结合使用 ,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://www.cnblogs.com/anyxl/p/10722166.html
0
投稿
猜你喜欢
- 1. 简介有些时候在项目中,使用配置文件来配置一些灵活的参数是比较常见的事,因为这会使得代码的维护变得更方便。而ini配置文件是比较常用的一
- 一,问题背景作者在用tensorflow做实验时,import tensorflow忽然报错:cannot import name '
- 如果不用类库(如jquery)来写,往往很多时候,都需要通过id或tag来获取html里的某一对象,然后对其进行操作。为了节省代码,把常用的
- 今天在帮前端准备数据的时候,需要把数据格式转成json格式,说实话,涉及到中文有时候真的是很蛋疼,除非对Python的编码规则比较了解,不然
- 让ASP搭配MYSQL所需要工具mysql-4.1.11-win32 myodbc-3.51.11-1-dll myodbc-3.51.11
- 了解触发器和事件(定时器)什么是触发器?概念: 触发器(trigger)是SQL server 提供给程序员和数据分析员来保证数据完整性的一
- 1、cat:拼接直接合并数据2、stack拼接:与cat不同的是,stack创建了一个新的维度,在拼接的同时,给数据增加了类别。并且stac
- using System;using System.Collections;using System.ComponentModel;usin
- 本文实例讲述了Python网络编程之使用TCP方式传输文件操作。分享给大家供大家参考,具体如下:TCP文件下载器客户端需求:输入要下载的文件
- 很多SQL Server程序员对子查询(subqueries)的使用感到困惑,尤其对于嵌套子查询(即子查询中包含一个子查询)。现在,就让我们
- 如下所示:# -*- coding: utf-8 -*-#简述:一个整数,它加上100和加上268后都是一个完全平方数#提问:请问该数是多少
- 今天有个脚本需要遍历获取某指定文件夹下面的所有文件,我记得很早前也实现过文件遍历和目录遍历的功能,于是找来看一看,嘿,不看不知道,看了吓一跳
- 在平常的一些的小规模的数据的过滤、清洗过程中使用最多的就是正则表达式,但是随着数据规模的增大,正则表达式就显得有些心有余力不足了。正则表达式
- 大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻
- ./runInstaller 启动图形化报错 PRVF-0002 : Could not retrieve local nodename.
- MySQL是一个跨平台的开源关系型数据库管理系统,是我们常用的最经济实惠的数据库,由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特
- 本文实例讲述了Python编程判断这天是这一年第几天的方法。分享给大家供大家参考,具体如下:题目:输入某年某月某日,判断这一天是这一年的第几
- 前言:随着移动端的普及出现了很多的移动 APP,应用软件也随之流行起来。最近又捡起来了英雄联盟手游,感觉还行,PC 端英雄联盟可谓是爆火的游
- 在编写python函数时,无意中发现一个问题:python中的变量不能以数字打头,以下函数中定义了一个变量3_num_varchar,执行时
- 当一张的数据达到几百万时,你查询一次所花的时间会变多,如果有联合查询的话,我想有可能会死在那儿了。分表的目的就在于此,减小数据库的负担,缩短