VueJS（四）

mwwb

于 2020-06-29 17:30:30 发布

阅读量104

点赞数

分类专栏： VueJS 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_43278421/article/details/107012724

版权

VueJS 专栏收录该内容

14 篇文章

订阅专栏

今天继续学习Vue

表单和v-model
表单类的控件主要功能就是承载一个网页数据的录入和交互

包括单选、多选、下拉选择、输入框，使用他们完成数据的录入、校验、提交。
使用v-model进行双向绑定，额，和ng-model好像一模一样

	<body>
	    <div id="app">
			<input type="text" v-model="message" placeholder="输入...." />
			<p>内容为：{{message}}</p>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message:''
				}
			});
		</script>
	</body>

最简单的一个绑定方法,让message和文本框内的内容双向绑定

把input换成textarea效果也是一样的

<textarea v-model = "text"   placeholder = "输入.."></textarea>

这个时候你在textarea标签元素中写的内容就不会生效了，他只关心绑定的内容

如果希望实时更新，可以用@input 代替v-model

<body>
		<div id="app">
			<input type="text" @input="handleInput">
			<p>输入内容为：{{message}}</p>
		</div>
		
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message:'',
				},
				methods:{
					handleInput:function(e){
						this.message = e.target.value;
					}
				}
			});
		</script>
	</body>

他绑定了一个函数

单选按钮的绑定
他不需要v-model，而是只用v-bind

	<body>
		<div id="app">
			<input type="radio" :checked="picked">
			<label>单选按钮</label>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					picked:false
				}
			})
		</script>
	</body>

下面这样可以实现如下效果
在这里插入图片描述

<body>
		<div id="app">
			<input type="radio" v-model="picked" value = "html" id="html">
			<label for = "html" >HTML</label>
			<br>
			<input type="radio" v-model="picked" value="js" id="js" />
			<label for = "js">javascript</label>
			<br>
			<input type="radio" v-model="picked" value="css" id="css">
			<label for = "css">CSS</label>
			<br>
			<p>选项的项是：{{picked}}</p>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					picked:'js'
				}
			})
		</script>
	</body>

其中label的for属性是表示与哪个关联，这里绑定是通过id

复选框
和前面的单选框一样，也分为单独使用和组合使用
单独使用的时候差不多

<input type="checkbox" v-model="checked" id="checked">
<label for="checked">选择状态：{{checked}}</label>

也需要用到for

组合使用的时候

	<body>
		<div id="app">
			<input type="checkbox" v-model="checked" value="html" id="html">
			<label for="html">HTML</label>
			<br>
			<input type="checkbox" v-model="checked" value="js" id="js" />
			<label for="js">Js</label>
			<br>
			<input type="checkbox" v-model="checked" value="css" id="css" />
			<label for="css">css</label>
			<br>
			<p>{{checked}}</p>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					checked:['html','css']
				}
			})
		</script>
	</body>

就差不多这样

选择列表：
下拉选择器

	<body>
		<div id="app">
			<select v-model="selected" >
				<option>html</option>
				<option value="js">js</option>
				<option>css</option>
			</select>
			<p>{{selected}}</p>
		</div>
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					selected:'html',
					}
			})
		</script>
	</body>

这个个是单选
在select元素中添加一个multiple属性就可以多选了

下面是使用v-for来实现下拉列表输出

	<body>
		<div id="app">
			<select v-model="selected">
				<option
				   v-for="option in options"
				   :value="option.value">{{option.text}}</option>
			</select>
			<p>选择的：{{selected}}</p>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					selected:'html',
					options:[
						{
							text:'html',
							value:'html'
						},
						{
							text:'js',
							value:'js'
						},
						{
							text:'CSS',
							value:'css'
						}
					]
				}
			})
		</script>
	</body>

实际业务很少直接使用这种下拉，一般都是自己写一个组件控件

绑定值
业务中需要绑定动态数据的时候可以使用v-bind来实现

<body>
		<div id="app">
			<input type="radio" v-model="picked" :value="value" >
			<label>单选</label>
			<p>{{picked}}</p>
			<p>{{value}}</p>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					picked:false,
					value:123
				}
			})
		</script>
	</body>

点击按钮后，app.picked=app.value

复选框的动态绑定值方法差不多

	<body>
		<div id="app">
			<input 
			type="checkbox"
			v-model="toggle"
			:true-value="value1"
			:false-value="value2">
			<label>复选框</label>
			<p>{{toggle}}</p>
			<p>{{value1}}</p>
			<p>{{value2}}</p>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					toggle:false,
					value1:'a',
					value2:'b'
				}
			})
		</script>
	</body>

也是：value的形式

	<body>
		<div id="app">
			<select v-model="selected">
				<option :value="{number:123}" >123</option>
			</select>
		<p>	{{selected.number}}</p>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					selected:'',
				}
			})
		</script>
	</body>