蒲公英聯盟提供ghost win10,ghost win7,xp,裝機純凈版,64位旗艦版,綠色軟件,免費軟件下載基地!

當前位置:星际争霸重制版98元有人买吗 > 教程 > 服務器類 >

星际争霸地图编辑器:data: {message: 'Hello World'

來源:蒲公英系統┆發布時間:2018-10-30 09:03┆點擊:

星际争霸重制版98元有人买吗 www.peger.icu 1、使用v-model指令,使得視圖和數據實現雙向綁定。v-model主要用在表單的input輸入框,完成視圖和數據的雙向綁定。

2、JavaScript代碼

<script type="text/javascript" src=//www.3lian.com/edu/2017/06-24/"../js/vue-1.0.21.js"></script> <script type="text/javascript"> window.onload = function() { vm = new Vue({ el: '#app', data: { message: 'Hello World', } }); } </script>

3、Html的頁面代碼

<div id="app" class="container"> <input type="text" v-model='message'/> <input type="text" v-model='message'/> <br /> {{message}} </div>

4、完整的代碼

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href=//www.3lian.com/edu/2017/06-24/"../css/bootstrap.min.css" rel="external nofollow" /> <style type="text/css"> .container{ margin-top: 20px; } </style> <script type="text/javascript" src=//www.3lian.com/edu/2017/06-24/"../js/vue-1.0.21.js"></script> <script type="text/javascript" src=//www.3lian.com/edu/2017/06-24/"../js/jquery.min.js"></script> <script type="text/javascript"> $().ready(function() { var vm = new Vue({ el: '#app', data: { message: "Hello World ! " } }); }); </script> </head> <body> <div id="app" class="container"> <input type="text" v-model='message'/> <input type="text" v-model='message'/> <br /> {{message}} </div> </body> </html>

5、效果演示           

Vue.js之視圖和數據的雙向綁定(v-model)教程 三聯

尚未注冊暢言帳號,請到后臺注冊