Vue.js学习笔记——处理用户输入（逆转消息）
2018-02-06 10:58
405 查看
源代码地址：https://cn.vuejs.org/v2/guide/#header
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title></title>
<script src="vue.js" type="text/javascript" charset="GBK"></script>
</head>
<body>
<div id="app">
<input v-model="message">
<p>{{ message }}</p>
<button @click="reverseMessage">逆转消息</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello World!'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
效果截图：
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title></title>
<script src="vue.js" type="text/javascript" charset="GBK"></script>
</head>
<body>
<div id="app">
<input v-model="message">
<p>{{ message }}</p>
<button @click="reverseMessage">逆转消息</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello World!'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
效果截图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue.js学习笔记——简单事件处理
- vue学习02--处理用户输入(v-on/v-model/v-show/v-text/v-html)
- vue.js基础-处理用户输入与双向数据绑定
- Shell脚本学习笔记－用户输入处理
- Ogre 学习笔记 (一) 处理用户的输入事件 OIS
- js自定义消息机制研究学习（一） ——看百度搜索输入提示
- DXUT 学习笔记（3）对键盘鼠标的响应 及 消息处理
- 学习Altas 笔记[js调用重载的方法出错,如何处理]
- Android消息处理学习笔记
- js自定义消息机制研究学习（一） ——看百度搜索输入提示
- C# Managed DirectX 学习笔记 一 (基础环境,画三角形,输入的处理)
- 【Visual C++】游戏开发笔记十二 游戏输入消息处理（一） 键盘消息处理
- 【Visual C++】游戏开发笔记十二 游戏输入消息处理（一） 键盘消息处理
- [原]【Visual C++】游戏开发笔记十二 游戏输入消息处理（一） 键盘消息处理
- WPF and Silverlight 学习笔记:键盘输入、鼠标输入、焦点处理
- php学习笔记：第八节--表单和用户输入，$_GET,$_POST
- js学习笔记（十四）事件处理模型
- CAD二次开发学习笔记八(用户输入)
- Windows Mobile学习笔记_关于csliderbar和wm_hscroll消息处理
- 【Visual C++】游戏开发笔记十二 游戏输入消息处理（一） 键盘消息处理