Vue之双向数据绑定
2024-08-29 04:50:47
demo.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue-双向数据绑定</title>
<!--自选版本-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
</head>
<body>
<div id="app">
<div>
<div>
<!--双向数据绑定: 输入的值显示输出在页面上-->
<h3>双向数据绑定 input / select / textarea</h3>
<label>姓名：</label>
<input ref="name" type="text" v-on:keyup="logName"/>
<span>{{name}}</span>
<label>年龄：</label>
<input ref="age" type="text" v-on:keyup.enter="logAge"/>
<span>{{age}}</span>
</div>
</div> <hr>
<!--双向数据绑定: 使用model方式实现-->
<div>
<h3>双向数据绑定(v-model方式实现)</h3>
<label>姓名：</label>
<input type="text" v-model="name2"/>
<span>{{name2}}</span>
<label>年龄：</label>
<input type="text" v-model="age2"/>
<span>{{age2}}</span>
</div> </div>
<script src="app.js"></script> </body>
</html>
app.js
var app = new Vue({
el: '#app',
data: {
name: "",
age: "",
name2: "",
age2: "",
},
methods: {
logName: function () {
console.log("正在输入名字！")
this.name = this.$refs.name.value;
},
logAge: function () {
console.log("正在输入年龄！")
this.age = this.$refs.age.value;
}
},
})
截图：
最新文章
- Xcode插件描述
- LoadRunner上传文件脚本
- JavaScript 之垃圾回收和内存管理
- 2014 Super Training #1 C Ice-sugar Gourd 模拟，扫描线
- request请求对象实例
- Valid Palindrome [LeetCode]
- Json.net/Newtonsoft 3.0 新特性JObject/Linq to Json
- hdu2457:DNA repair
- 用jQuery 处理XML-- jQuery与XML
- 【转】iOS应用崩溃日志揭秘2
- Sqlserver 列转行 行转列
- sphinx （coreseek）——2、区段查询实例
- TelephonyManager
- H-W平衡
- C++ STL之min_element()与max_element（）（取容器中的最大最小值）
- [TJOI 2017]异或和
- kuda 了解片
- 概率霍夫变换（Progressive Probabilistic Hough Transform）原理详解
- node-express根据请求，判断PC和移动端
- mongoose的笔记