v-model双向绑定

项目
实战项目总结分析,源代码,视频分享
tea_year
<!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>

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读