博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue.js学习系列(二十)--常用指令(三)
阅读量:6601 次
发布时间:2019-06-24

本文共 570 字,大约阅读时间需要 1 分钟。

hot3.png

3.v-model实现双向绑定

此用于表单元素上,例如常见的input,select,textarea,radio,

checkbox等。,所谓双向绑定,指的就是我们在js中的vue实例中的

data与其渲染的上的内容保持一致,两者无论谁被改变,

另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的

示例:

在 input 输入框中我们可以使用  指令来实现双向数据绑定:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<p>{

{message}}</p>

<input v-model="message">

</div>

<script type="text/javascript">

new  Vue({

el:"#app",

data:{

message:"姓名"

}

})

</script>

</body>

</html>

 

在p标签的内容,也显示在文本框中

 

转载于:https://my.oschina.net/u/2971691/blog/860139

你可能感兴趣的文章
Java查找算法——二分查找
查看>>
数据在千万级别上进行全文检索有哪些技术?强大的大数据全文索引解决方案-ClouderaSearch...
查看>>
E. Dreamoon and Strings(Codeforces Round #272)
查看>>
android --多线程下载
查看>>
利用Arduino快速制作Teensy BadUSB, 攻击计算机
查看>>
初始加载时edittext不自动获取焦点的方法
查看>>
Skipping Windows Azure Startup Tasks When Running in the Emulator
查看>>
C实现计算任意整数不损失精度的阶乘
查看>>
加载ajax内容到页面后的样式重新渲染需$().listview('refresh');
查看>>
ORA-01000: maximum open cursors exceeded
查看>>
分享一个嵌入式httpdserver开发库 - boahttpd library
查看>>
Android Socket编程学习笔记
查看>>
2014年度江西省青年科学家培养对象名单(共36名)
查看>>
如何构建微服务架构
查看>>
【前端笔记】彻底理解变量与函数的声明提升
查看>>
PHP工具箱:PHPStan —— PHP 静态代码分析工具
查看>>
Python 股票分析入门
查看>>
iOS - 多链式动画框架 LSAnimator
查看>>
Android 反编译利器,jadx 的高级技巧
查看>>
Mycat 读写分离 数据库分库分表 中间件 安装部署
查看>>