|
|
@@ -0,0 +1,51 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <div class="box">{{str}}</div>
|
|
|
+ <!-- v-model 指令：实现表单元素和数据的双向绑定 -->
|
|
|
+ <!--v-model.trim 指令：自动去除首尾空格 -->
|
|
|
+ <!-- <input type="text" v-model.trim="str"> -->
|
|
|
+ <!-- v-model.number 指令：将输入值转换为数字类型 -->
|
|
|
+ <!-- <input type="text" v-model.number="str"> -->
|
|
|
+ <!-- v-model.lazy 指令：在输入框失去焦点时更新数据 -->
|
|
|
+
|
|
|
+ <!-- input事件：当输入框的值发生变化时触发 -->
|
|
|
+ <!-- <input @input="inputFun" type="text" v-model.lazy="str"> -->
|
|
|
+ <!-- change事件：当输入框失去焦点时触发 -->
|
|
|
+ <input @change="inputFun" type="text" v-model.lazy="str">
|
|
|
+
|
|
|
+
|
|
|
+ <button @click="changeStr">提交</button>
|
|
|
+ </div>
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
+ <script>
|
|
|
+ let a = 10;
|
|
|
+ new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ str: ""
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeStr() {
|
|
|
+ // this.str = 100;
|
|
|
+ console.log(typeof this.str);
|
|
|
+ console.log(a);
|
|
|
+ },
|
|
|
+ inputFun() {
|
|
|
+ console.log("input事件触发");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
