|
[Vue.js]学习笔记-Vue.js表单-输入框
导读部分
教程部分
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
本次我们来学习Vue.js的表单处理， 就是页面上的表单元素。
我们可以通过v-model指令在表单控件元素上创建双向的数据绑定， 如下图：
v-model 会根据控件类型自动选取正确的方法来更新元素。
今天我们主要来学习下， Vue.js表单中红的输入框（input， textarea）的双向数据绑定
其它不说， 直接看实例学习哈！！
实例：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>
<p>textarea 元素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob',
message2: '苏飞论坛\r\n[url=http://www.sufeinet.com]http://www.sufeinet.com[/url]'
}
})
</script>
</body>
</html>
运行如下：
可以清晰的看到， 我们给input框， 以及textarea中均进行了赋值操作
| 
窥视卡
雷达卡
发表于 2018-12-20 10:52:46
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2018-12-20 13:59:09
