Vue的基本赋值和双向数据绑定_vue view 赋值

作者：小蓝xlanll | 2024-02-23 05:01:41

踩

vue view 赋值

Vue.js一个前端框架，渐进式的，侵入性高，你一旦用了它就只能按照它的方式写(从头到尾)。

Mvvm模式

mvvm通过数据双向绑定让数据自动地双向同步

m：model数据模板

v：view视图

vm：模板视图，是m和v的桥梁

mvvm的核心是数据，我们要操作的是数据，不用操作DOM(页面的元素)

Vue的基本赋值


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个vue</title>
		<!--引入vue的js-->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="div_1" >
			<!--赋值-->
			{{name}}:{{sex}}:{{age}}
			
		</div>
		
		<script>
                        <!--这里就是操作div_1里面的元素-->
			var vue=new Vue({
				<!--选中id为div_1的div-->
				el:'#div_1',
				data:function(){
					return {
						<!--给vue的元素赋值-->
						name:'xxxx',
						sex:'xxx',
						age:'0'
					}
				}
			})
			
			
		</script>
	</body>
</html>

Vue的双向数据绑定

数据的改变会引起DOM的改变，DOM的改变也会引起数据的改变


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个vue</title>
		<!--引入vue的js-->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="div_2">
			<!--v-model是双向绑定数据-->
                        <!--v-once是单向绑定-->
			<input type="text" v-model="shu1"/></br>
			<input type="text" v-model="shu2"/></br>
			<input type="text" v-model="sum"/></br>
                        <!--v-on:click点击事件-->
			<input type="button" v-on:click="jia" value="+"/>
			<input type="button" v-on:click="jie" value="-"/>
			<input type="button" v-on:click="cheng" value="*"/>
			<input type="button" v-on:click="chu" value="/"/>
		</div>
		
		<script>
			
			
			var vue2=new Vue({
				el:'#div_2',
				data:function(){
					return {
						shu1:'1',
						shu2:'2',
						sum:'3',
					}
				},
				methods:{
					<!--jia是方法名(函数名)-->
					
					jia:function(){
                                    <!--转intparseInt()-->
						this.sum=parseInt(this.shu1)+parseInt(this.shu2);
					},
					jie:function(){
						this.sum=parseInt(this.shu1)-parseInt(this.shu2);
					},
					cheng:function(){
						this.sum=parseInt(this.shu1)*parseInt(this.shu2);
					},
					chu:function(){
						this.sum=parseInt(this.shu1)/parseInt(this.shu2);
					}
				}
			})
		</script>
	</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/133859