v-model双向绑定

最新推荐文章于 2024-07-02 14:02:51 发布

teayear

最新推荐文章于 2024-07-02 14:02:51 发布

阅读量524

点赞数

分类专栏：前端技术道本自然文章标签： v-model 双向绑定 VUE

本文链接：https://blog.csdn.net/zhangchen124/article/details/86570061

版权

道本自然同时被 2 个专栏收录

743 篇文章 40 订阅

订阅专栏

前端技术

260 篇文章 18 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>VUE绑定模式</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>input标签元素</p>
            <input v-model="message" placeholder="编辑我" />
            <p>消息是：{{message}}</p>
            <hr />
            <p>textarea元素的案例</p>
            <p style="background: #444444;">{{message2}}</p>
            <textarea v-model="message2" placeholder="多行文本框输入..."></textarea>
        </div>
        <!--js代码-->
        <script>
            new Vue({
                el:'#app',
                data:{
                    message:'VUE案例模式',
                    message2:'前端视频,www.csdn.net'
                }
            })
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-model案例2</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!--布局设计-->
		<div id="app">
			<p>复选框:</p>
			 <input type="checkbox" id="checkbox" v-model="checked">
  			 <label for="checkbox">{{ checked }}</label>
			<p>多个复选框</p>
			<input type="checkbox" id="rubbo" value="rubbo" v-model="checkedNames" />
			<label for="rubbo">rubbo</label>
			<input type="checkbox" id="java" value="java" v-model="checkedNames" />
			<label for="java">java</label>
			<input  type="checkbox" id="python" value="python" v-model="checkedNames" />
			<label for="python">python</label>
			<br />
			<span>选择值为:{{checkedNames}}</span>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					checked:false,
					checkedNames:[]
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>VUE单选按钮案例3</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<!--布局-->
		<div id="app">
			<input type="radio" id="agree" value="agree" v-model="picked" />
			<label for="agree">agree</label>
			<input type="radio" id="disagree" value="disagree" v-model="picked" />
			<label for="disagree">disagree</label>
			<hr style="width: 400px;margin-left: 0px;"/>
			<span>{{picked}}</span>
		</div>
		
		<!--js代码-->
		<script>
			new Vue({
				el:'#app',
				data:{picked:'agree'}
			})
		</script>
	</body>
</html>