首页 > 其他分享 >Vue---数据绑定(v-model)

Vue---数据绑定(v-model)

时间:2022-09-21 19:33:50浏览次数:62  
标签:Vue name 绑定 --- model data

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		一。单向双向数据绑定
		1.单向数据绑定:页面上输入内容(页面上展示数据)----不出传入到Vue控件里。
		2.双向数据绑定:页面上输入内容(页面上展示数据,)----同时传入到Vue控件里。   方法:v-model
		备注:双向绑定应用在(input,select,这样输入性标签中),
		
		二。两种vue写法
		1.对象式写法  如下:
		      el:'#root',
				data:{
					name:'魏世轩',
				},
		2.函数式写法  
			data:function() {
					console.log('@@@',this)
					return{
						name:'请输入内容',
					}
				}
			
		3.MVVM
		M = model中的数据
		V = 页面上数据
		VM = vue实例
		流程:M中编写数据----传入VM中---在返回到页面上V
			 V页面上编写数据---传入VM中---传入M中
		
		-->
		<div id="root">
		单向数据绑定:<input type="text"  id="input"  :value="name"/>
		双向数据绑定:<input type="text"  id="input"  v-model:value="name"/>
		</div>
		<script src="../vue/vue.js"></script>
	</head>
	<body>
		<script>
		 Vue.config.productionTip = false;
			new Vue({
				//对象式写法
				el:'#root',
				data:{
					name:'魏世轩',
				},
				
				//函数式写法
				data:function() {
					console.log('@@@',this)
					return{
						name:'请输入内容',
					}
				}
				
				
			});
			
			
		</script>
	</body>
</html>

  

标签:Vue,name,绑定,---,model,data
From: https://www.cnblogs.com/wsx123/p/16716878.html

相关文章

  • 47.permutations-ii 全排列 II
    题目链接:47.permutations-ii相比全排列,多了重复数字的干扰,可以参照带重复数字的组合问题来进行去重:if(used[i]==1)判断nums[i]是否已经在path中,if(i>0&&nums[i]......
  • 04-基于锚框的额单阶段检测算法:SSD
                                     ......
  • 2-sat问题
    什么是2-sat问题如给定\(n\)个变量,可以赋值为\(A{_{0}}\)或\(A{_{1}}\),现给出\(m\)个限制,询问是否存在合法赋值使得\(m\)个询问均成立很抽象吧举个例子现在有\(n\)个......
  • CSP-S2022游记
    2022.9.18晚分数估出来了,63.5,比去年高(去年才三十几分啊/(ㄒoㄒ)/~),一部分原因是我的成长,还有一部分是因为确实比去年简单不少。单论分数我满意,一比较又觉得担心且不甘心。......
  • angular入门---Store页面
    Angular入门篇2预期效果:新项目配置1.首先使用"ngnewStore"指令在Angular文件夹下创建一个新项目。下面利用vscode打开项目进行操作(部分插件已安装)。2.找到pac......
  • CentOS 7.x 安装redis-5.0.14
    准备篇一、防火墙配置CentOS7.x默认使用的是firewall作为防火墙,这里改为iptables防火墙。1、关闭firewall:systemctlstopfirewalld.service#停止firewallsystemctl......
  • 记录--通过手写,分析Promise核心原理
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助1.定义整体结构先写出构造函数,将Promise向外暴露/*自定义Promise函数模块:IIFE*/(function(win......
  • Vue3 Echarts 省地图
    一、效果 二、echarts的安装npminstallecharts三、echarts各省份地图js导入以下是别人下载好的各省份的数据,可以直接下载使用,放在项目js文件夹下,在页面内引入。......
  • 计算机毕业设计 SpringBoot+Vue校园疫情防控系统 校园疫情管理系统 社区疫情防控系统J
    ......
  • 使用jaeger-native在Envoy中进行链路追踪
    系统环境网络:172.31.81.0/24服务:Front-Proxy:前端代理,监听端口8000/tcp2个后端服务service1:接收Front-Envoy的请求,并会请求service2service2:接收service1的请求......