vue.js使用v-model指令实现的数据双向绑定功能示例
本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能。分享给大家供大家参考，具体如下：
vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍：
v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如：
app.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>
vuejs v-model 数据双向绑定
</title>
<style type="text/css">
[v-cloak] { display: none }
</style>
</head>
<body>
<div id="app">
<form>
姓名：
<input type="text" v-model="data.name" placeholder="姓名"/>
<br />
性别：
<input type="radio" id="one" value="One" v-model="data.sex"/>
<label for="man">男</label>
<input type="radio" id="two" value="Two" v-model="data.sex"/>
<label for="male">女</label>
<br />
<input type="checkbox" id="jack" value="book" v-model="data.interest"/>
<label for="jack">阅读</label>
<input type="checkbox" id="john" value="swim" v-model="data.interest"/>
<label for="john">游泳</label>
<input type="checkbox" id="move" value="game" v-model="data.interest"/>
<label for="move">游戏</label>
<input type="checkbox" id="mike" value="song" v-model="data.interest"/>
<label for="mike">唱歌</label>
<br />
身份：
<select v-model="data.identity">
<option value="teacher" selected>教师</option>
<option value="doctor">医生</option>
<option value="lawyer">律师</option>
</select>
</form>
<p><pre>data: {{$data | json 2}}</pre></p>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
new Vue({
el: '#app',
data: {
data:{
name:'',
sex:'',
interest:[],
identity:''
}
}
})
})
</script>
</html>
使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：
希望本文所述对大家vue.js程序设计有所帮助。
-
使用 v-model 指令，可以建立数据到模板的双向绑定。本质上它是如下写法的语法糖： <input v-model="value" /> => <input value={{ self.value }} ev-input={function(e) { self.value = e.target.value; this.update(); }.bind(this)} /
-
问题内容： 我一直在尝试定义指令，以便可以根据字段的类型及其参数（存储在数据库中）以表格形式显示不同的“窗口小部件”。我需要对不同类型的场景做出反应，因此需要使用指令来处理布局。 在玩一些示例时，我想出了 kinda 可以工作的代码： HTML 指示 这似乎可行（尽管明显比* proper * angularJS变量绑定要慢），但我认为必须有更好的方法来做到这一点。谁能阐明这件事？ 问题答案： 我
-
本文向大家介绍Vue实现双向数据绑定，包括了Vue实现双向数据绑定的使用技巧和注意事项，需要的朋友参考一下 Vue实现双向数据绑定的方式，具体内容如下 Vue是如何实现双向数据绑定的呢？答案是前端数据劫持。其通过Object.defineProperty()方法，这个方法可以设置getter和setter函数，在setter函数中，就可以监听到数据的变化，从而更新绑定的元素的值。 实现对象属性变化
-
本文向大家介绍Nuxt.js 数据双向绑定的实现，包括了Nuxt.js 数据双向绑定的实现的使用技巧和注意事项，需要的朋友参考一下 假定我们有一个需求，一开始通过mounted()将一个字符串渲染在页面上，但是我们经过操作后修改了数据并且需要将得到的结果重新异步渲染到页面中去，而不是跳转刷新页面来重新渲染 首先模板中data()中定义数据，并且要将定义的数据显示出来 然后我们通过methods里的
-
本文向大家介绍vue实现的双向数据绑定操作示例，包括了vue实现的双向数据绑定操作示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue实现的双向数据绑定操作。分享给大家供大家参考，具体如下： 使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试，可得到如下运行效果 感兴趣的朋友可以测试一下看看运行效果
-
本文向大家介绍vue使用Proxy实现双向绑定的方法示例，包括了vue使用Proxy实现双向绑定的方法示例的使用技巧和注意事项，需要的朋友参考一下 前言：vue3.0要用Proxy来实现双向绑定，因此先来尝试一下实现方法。 1 Object.defineProperty 实现 原来vue2的实现使用Object.defineProperty，监听set，但对于数组直接下标给数组设置值监听不了。 2