vue.js表单与监听数据

最新推荐文章于 2024-06-04 10:15:53 发布

Ti小芬

最新推荐文章于 2024-06-04 10:15:53 发布

阅读量781

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/sanqianjia/article/details/106388113

版权

day02笔记

1、Vue表单

Vue表单是双向数据绑定的！
核心指令： v-model
```
<标签控件  v-model="变量" />
```

单选框、密码框、多行文本框

<input  type="text" v-model="变量" />
<input  type="password" v-model="变量" />
<textarea v-model="变量"></textarea>

单选

<input  type="radio" v-model="变量" value="值1" />
<input  type="radio" v-model="变量" value="值2" />
<input  type="radio" v-model="变量" value="值3" />

data:{
	 变量:值2    // 值2的控件将会被选中
}

变量获取到的数据就是控件的value值，如果变量绑定的数据和控件的value值一致，那么该单选控件被选中

多选

<input  type="checkbox" v-model="变量" value="值1" />
<input  type="checkbox" v-model="变量" value="值2" />
<input  type="checkbox" v-model="变量" value="值3" />


data:{
	变量:[值1]   // 绑定的变量是一个数组！ 值1的控件将会选中
}

多选，每个控件都需要有value值，且绑定的变量是一个数组

勾选

<input  type="checkbox" v-model="变量" />
data:{
	变量:布尔值
}

下拉列表

<select v-model="变量">
  <option value="值1">111</option>
  <option value="值2">222</option>
  <option value="值3">333</option>
</select>
data:{
		变量:值2   // 值2的option控件被选中
}

每个option标签都要有value值

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02、Vue表单</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <p>姓名：<input type="text" v-model="userinfo.username" >{
    {userinfo.username}}</p>
        <p>密码：<input type="password" v-model="userinfo.password">{
    {userinfo.password}}</p>
        <p>
            性别：
                <!-- 作为单选控件的时候，需要给每个控件一个 value值！ -->
               <label><input type="radio" value="1"  v-model="userinfo.sex">男</label>
               <label><input type="radio" value="0" v-model="userinfo.sex">女</label>
               {
    {userinfo.sex}}

最低0.47元/天解锁文章

Ti小芬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue.js表单与监听数据

day02笔记1、Vue表单Vue表单是双向数据绑定的！核心指令： v-model<标签控件 v-model="变量" />单选框、密码框、多行文本框<input type="text" v-model="变量" /><input type="password" v-model="变量" /><textarea v-model="变量"></textarea>单选<input type="rad
复制链接

扫一扫