Vue3框架学习之路10 Vue3表单

最新推荐文章于 2024-07-19 07:45:49 发布

God shen

最新推荐文章于 2024-07-19 07:45:49 发布

阅读量199

点赞数

文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_53655745/article/details/119148166

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>input 元素:</p>
			<input type="text" placeholder="编辑我....." v-model="message"/>
			<p>input 表单信息是:{{message}}</p>
			<p>textarea 元素:</p>
			<textarea v-model="message2" placeholder="多行文本输入...."></textarea>
			<p>textarea 表单信息是:</p>
			<p>{{message2}}</p>
		</div>
		<script type="text/javascript">
			const app=Vue.createApp({
				data(){
					return{
						message:'',
						message2: 'vue'
					}
				}
			}).mount("#app")
		</script>
		<!-- 下面是v-model在表单上的应用，个人的理解v-model是获得当前控件的内容(value)，再更新v-model所指的对象 -->
		<div id="bpp">
			<input type="checkbox" v-model="msg" value="Google" id="r">
			<label for="r">Google</label>
			<input type="checkbox" v-model="msg" value="Taobao" id="q">
			<label for="q">Taobao</label>
			<p>所选的值为{{msg}}</p>
		</div>
		<script type="text/javascript">
			const bpp=Vue.createApp({
				data(){
					return{
						msg:[]
					}
				}
			}).mount("#bpp")
		</script>
		<div id="cpp">
			<input type="radio" v-model="mmsg" id="a" value="Google">
			<label for="a">Google</label>
			<input type="radio" id="b" v-model="mmsg" value="Taobao" />
			<label for="b">Taobao</label>
			<p>所选的是:{{mmsg}}</p>
		</div>
		<script type="text/javascript">
			const cpp=Vue.createApp({
				data(){
					return{
						mmsg:''
					}
				}
			}).mount("#cpp")
		</script>
		<div id="dpp">
			<select v-model="selected">
				<option value="">选择一个网站</option>
				<option value ="http://www.google.com">Google</option>
				<option value ="http://www.baidu.com">百度</option>
			</select>
			<p>所选的是:{{selected}}</p>
		</div>
		<script type="text/javascript">
			const dpp=Vue.createApp({
				data(){
					return{
						selected:''
					}
				},
				watch:{
					selected:function(){
						alert("你选择的网站是:" + this.selected)
						go_on = confirm("确定要跳转网站吗")
						if(go_on){
							open(this.selected)
						}
					}
				}
			}).mount("#dpp")
		</script>
		<div id="epp" class="demo">
		  <select v-model="selected">
		    <option v-for="option in options" :value="option.value">
		      {{ option.text }}
		    </option>
		  </select>
		  <span>选择的是: {{ selected }}</span>
		</div>
		
		<script>
		const epp = {
		  data() {
		    return {
		      selected: 'www.google.com',
		      options: [
		        { text: 'Google', value: 'www.google.com' },
		        { text: 'Taobao', value: 'www.taobao.com' }
		      ]
		    }
		  }
		}
		
		Vue.createApp(epp).mount('#epp')
		</script>
	</body>
</html>