vue指令之表单控件绑定v-model v-model与v-bind结合使用

作者：anyxl 时间：2023-07-02 16:28:15　

一、表单控件绑定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

标签：vue,指令,表单,v-model,v-bind

投稿

vue指令之表单控件绑定v-model v-model与v-bind结合使用

猜你喜欢

解决vue热替换失效的根本原因

asp无组件上传并插入到数据库里

python中安装模块包版本冲突问题的解决

关于INDEX SERVER+ASP建立查询引擎的一点心得

详解MySQL数据类型之数字类型正确使用

vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

MYSQL插入处理重复键值的几种方法

ShardingSphere数据库读写分离算法及测试示例详解

MySQL中由load data语句引起死锁的解决案例

pandas实现按行选择的示例代码

vue+moment实现倒计时效果

详解Mysql自动备份与恢复的几种方法（图文教程）

Django 删除upload_to文件的步骤

在一台服务器上安装两个或多个mysql的实现步骤

PL/SQL 类型格式转换

python 对类的成员函数开启线程的方法

Perl与JS的对比分析(数组、哈希)

Django结合ajax进行页面实时更新的例子

利用keras使用神经网络预测销量操作

Go语言中并发的工作原理