怎么新建MySQL数据库
发布时间：2022-07-07
作者：admin
阅读：316
阅读：316
关于“Vue怎样实现双向绑定的，有多少方式”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。
1、双向绑定
4、注意
感谢各位的阅读，以上就是“Vue怎样实现双向绑定的，有多少方式”的内容了，经过本文的学习后，相信大家对Vue怎样实现双向绑定的，有多少方式都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！
1、双向绑定
双向绑定就是 你们前端数据改变 你们data中的数据也会改变，同样的，你们data中的数据改变了 前端页面中的数据也同样会发生改变，而且，这个过程是不需要刷新的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 输入什么就会显示什么，其实就是前端数据改变，message就会跟着改变-->
输入文本：<input type="text" v-model="message">{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
</body>
</html>
运行结果：
data中的数据改变了 前端页面中的数据也同样会发生改变，如下所示：
前端数据改变 你们data中的数据也会改变
如下所示：
2、那么其它标签选中会不会也有这个结果，答案当然是有：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
性别：
<input type="radio" name="sex" value="男" v-model="message"> 男
<input type="radio" name="sex" value="女" v-model="message"> 女
<p>你的性别是：{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
</body>
</html>
运行结果：
3、我们再来看一个：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<select v-model="select">
<option value="" disabled>--请选择--</option>
<option>男</option>
<option>女</option>
</select>
<span>你的选择：{{select}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
select: ""
}
});
</script>
</body>
</html>
运行结果：
4、注意
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue 实例的数据作为数据来源。你应该通过JavaScript 在组件的data选项中声明初始值！！！
总结
感谢各位的阅读，以上就是“Vue怎样实现双向绑定的，有多少方式”的内容了，经过本文的学习后，相信大家对Vue怎样实现双向绑定的，有多少方式都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理