vue04点滴v-model

最新推荐文章于 2024-09-27 11:12:45 发布

dongsdh

最新推荐文章于 2024-09-27 11:12:45 发布

阅读量74

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/dongsdh/article/details/102790632

版权

Vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		.act{
			color: red;
		}
	</style>
</head>
<body>
	<div id="app">
	</div>
	<script src="vue.js"></script>
	<script>
		//v-if是真正的条件渲染，DOM元素会被销毁会重建
		//v-show不管初始条件是什么，元素总是会被渲染
		//并且只是简单的css样式切换
		//v-if有更高的切换开销，v-show有更高的初始渲染开销
		new Vue({
			el:"#app",
			template:`
				<div>
					<!--<input type="text" v-model='msg'/>-->
					<input type="text" v-bind:value='msg' v-on:input = 'change'/>
					<p>{{msg}}</p>
				</div>
			`,
			data:function(){
				return {
					msg:'语文'					
				}
			},
			methods:{
				change(e){
					this.msg = e.target.value;
				}
			}
		})
	</script>
</body>
</html>