Signed-off-by: 袁洪波 <yuanhongbo@iot.chinamobile.com>

hong-boy · Apr 7, 2017 · a10ecfd · a10ecfd
commit a10ecfd
Show file tree

Hide file tree

Showing 3 changed files with 567 additions and 0 deletions.
diff --git a/demo.html b/demo.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>MVVM Demo</title>
+    <style type="text/css">
+        .bold {
+            font-weight: bold;
+        }
+    </style>
+    <script type="text/javascript" src="mvvm.js"></script>
+</head>
+<body>
+    <div id="demo">
+        <p>
+            <input type="text" v-model="desc"/>
+        </p>
+        <p>
+            <input type="text" v-model="user.name"/>
+        </p>
+        <p v-class="clazzName" v-html="descHtml"></p>
+        <p v-text="descText"></p>
+        <p>
+            <button v-on:click="showAlert">Show Alert</button>
+        </p>
+        <p>
+            <select v-model="province">
+                <option value="cq">重庆</option>
+                <option value="cd">成都</option>
+            </select>
+            <p>You picked: <span>{{province}}</span></p>
+        </p>
+        <p>
+            <input type="checkbox" id="soccerid" value="soccer" v-model="hobbits">
+            <label for="soccerid">足球</label>
+            <input type="checkbox" id="runningid" value="running" v-model="hobbits">
+            <label for="runningid">跑步</label>
+            <p>You picked: <span>{{hobbits}}</span></p>
+        </p>
+        <p>
+            <input type="radio" id="maleid" value="male" v-model="gender">
+            <label for="maleid">男</label>
+            <input type="radio" id="femaleid" value="female" v-model="gender">
+            <label for="femaleid">女</label>
+            <p>You picked: <span>{{gender}}</span></p>
+        </p>
+    </div>
+</body>
+<script type="text/javascript">
+    var vm = new MVVM({
+        el: document.querySelector('#demo'),
+        data: {
+            clazzName: 'bold',
+            desc: 'description from data...',
+            descText: "<span>It's text</span>",
+            descHtml: "<span>It's HTML</span>",
+            province: 'cq',
+            hobbits: ['soccer'],
+            gender: 'male',
+            user: {
+                name: 'Juven'
+            }
+        },
+        methods: {
+            showAlert: function(){
+                alert(this);
+            }
+        }
+    });
+</script>
+</html>