首页 > 其他分享 >Vue-双向数据绑定

Vue-双向数据绑定

时间:2022-09-05 23:23:10浏览次数:56  
标签:el Vue 绑定 双向 123456 data1

双向数据绑定的源代码

<body>
		<div id="app">
			<p>{{data1}}</p>
			<input name="" id="" :value="data1" @input="fn">
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				data1:"123456"
			},
			methods:{
				fn(e){
					this.data1=e.target.value
				}
				
			}
		})
	</script>

  Vue实现双向数据绑定代码

  v-model

<body>
		<div id="app">
			<p>{{data1}}</p>
			<input type="text" v-model="data1">
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				data1:"123456"
			}
		})
	</script>

  

标签:el,Vue,绑定,双向,123456,data1
From: https://www.cnblogs.com/forever-ljf/p/16660036.html

相关文章

  • Vue(2)函数初识,与computed的使用
    序在实例vue对象时候,可以选择使用computed来完成计算,mvvm是mode,view,viewmode实现数据的双向绑定,这也体现其的便捷性。示例代码点击查看代码<divid="app"> <inpu......
  • 前端js vue的语音播报
    目前h5新增一个文字转语音的功能(但是正在完善中,勉强能用),h5新增的SpeechSynthesisUtterance实例首先new一个SpeechSynthesisUtterance对象使用实例对象的一些属性,包括......
  • vue 通过URL直接下载PDF文件而不是预览
    项目需求:用户在点击下载时下载文件。该项目为前后端分离项目,download不起作用。我在做这个功能点时使用的方法是直接window.location.href=url可在测试时却发现word等......
  • vue3之composition-api的使用(包含watch watchEffect)
    是什么composition-api官方介绍vue2:options-api,组件按照选项组织,就是将组件各个部分严格写在methods、computed、watch、data等等里面(特定的区域写特定的代码);vue3:co......
  • IOS系统vue2, 点击返回上一页,页面空白无报错
    最近移了个项目,把页面所有的东西都移过来了,但是出现了这个问题,就是ios系统,咨询列表正常,详情页也没问题,返回上一页之后页面空白,接口请求了,也没报错,用的是gohistory(-1)的返......
  • vuex使用流程
     从状态出发,将状态提供给vue组件,组件在actions的方法中请求后端接口得到数据,然后委托给mutations(或者通过开发者工具进行更改),来改变状态。 ......
  • vue3 组件-动画进度条
    https://kuangyx.cn/docs/文章/vue3组件/进度条.html......
  • vue3 组件-通知菜单
    https://kuangyx.cn/docs/文章/vue3组件/通知菜单.html......
  • Vue+zxing实现扫二维码、条形码功能
    <scriptsetup>import{ref,reactive,toRefs}from'vue'import{BrowserMultiFormatReader}from'@zxing/library';import{Dialog,Notify}from'vant';......
  • vue3 组件-表格分页
    typescript类型提示(属性、方法、el-table与el-pagination自带ts类型)json配置el-table控制栏自定义单元格编辑编辑行自动请求接口接口请求参数与响应数据路径......