VueJS实现双向数据绑定：v-model

Posted 君临

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VueJS实现双向数据绑定：v-model相关的知识，希望对你有一定的参考价值。

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: \'#app\',
  data: {
    message: \'一变全变\'
  }
})
</script>
</body>
</html>

效果：

以上是关于VueJS实现双向数据绑定：v-model的主要内容，如果未能解决你的问题，请参考以下文章

vuejs怎样实现列表中checkbox的双向绑定及初始化渲

请问vuejs里的v-model 和:model有啥区别

vuejs怎样实现列表中checkbox的双向绑定及初始化渲

vue3自定义组件使用v-model实现双向数据绑定

v-mode 双向数据绑定

375 数据双向绑定演示：一个 input + v-model，Object.defineProperty，数据双向绑定的原理简单实现