Vue学习记录 vue单项数据绑定及事件绑定

最新推荐文章于 2025-06-27 12:15:28 发布

转载最新推荐文章于 2025-06-27 12:15:28 发布 · 362 阅读

文章标签：

#vue

使用学习记录专栏收录该内容

10 篇文章

订阅专栏

博客提及可复制查看效果，标签包含Vue，推测与Vue相关，但内容信息较少，未明确具体展示内容。

Document **请复制直接看效果**

<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	// <input type='text' v-bind:value="name"  > 这里是等号二不是冒号
	new Vue({
		el:"#app",
		template:`
			<div>
			单项数据绑定
				<input type='text' v-bind:value="name" :class=name > <br >
			双向数据绑定
				<input type="text" v-model="name" /><br>
				{{name}}
				直接改变
				<button v-on:click="name='我改变了' ">点击我改变name变量</button>
				通过方法进行改变
				<button v-on:click="change">点击我</button>
			</div>
		`,
		data:function(){
			return {
				name:'hello'

			}
		},
		methods:{
			change:function(){
				this.name='我用方法改变你'
			}
		}
	})
</script>