Home Explore Help
Sign In
lovecoding
/
VIP22
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

new

zsydgithub 2 years ago
parent
b27cb2408e
commit
04c2acc76a
4 changed files with 136 additions and 1 deletions
Split View Show Diff Stats
  1. 7 1
      10_vue/5_todolist.html
  2. 43 0
      10_vue/6_Set.html
  3. 41 0
      10_vue/7_computed.html
  4. 45 0
      10_vue/8_计算属性和监听器.html

+ 7 - 1
10_vue/5_todolist.html
View File 

@@ -39,7 +39,7 @@
 
       </li>
 
     </ul>
 
     <div>
 
-      <button>删除选择</button>
 
+      <button @click="del1()">删除选择</button>
 
       <span>总价{{total()}}</span>
 
     </div>
 
   </div>
 
@@ -95,6 +95,12 @@
 
             }
 
           })
 
           return sum
 
+        },
 
+        del1(){
 
+          this.list = this.list.filter((obj)=>{
 
+            return !obj.isChecked
 
+          })
 
+          console.log(this.list)
 
         }
 
         
       }

+ 43 - 0
10_vue/6_Set.html
View File 

@@ -0,0 +1,43 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <div id="app">
 
+    <button @click="change()">修改</button>
 
+    <ul>
 
+      <li v-for="(val,index) in arr">
 
+        {{val}}
 
+        {{index}}
 
+      </li>
 
+    </ul>
 
+  </div>
 
+  <script src="vue.js"></script>
 
+  <script>
 
+    new Vue({
 
+      el:"#app",
 
+      data:{
 
+        arr:['a','b','c','d'],
 
+        person:{
 
+          name:'zs'
 
+        }
 
+      },
 
+      methods:{
 
+        change(){
 
+          console.log(1111)
 
+          // this.arr[0] = 'x'
 
+          /* Vue中  不能使用数组[索引]的方式  去修改数组  因为页面不更新 */
 
+          /* Vue 要大写 */
 
+          /* Vue.set(data数据，修改值的索引，修改的参数) */
 
+          // Vue.set(this.arr,0,'x')
 
+          Vue.set(this.person,'name','lisi')
 
+        }
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+</html>

+ 41 - 0
10_vue/7_computed.html
View File 

@@ -0,0 +1,41 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <div id="app">
 
+    {{msg}}
 
+    <br>
 
+    {{msg.split('').reverse().join()}}
 
+    <br>
 
+
 
+    方法: {{newMsg1()}}    {{newMsg1()}}
 
+    <br>
 
+    计算属性: {{newMsg2}}    {{newMsg2}}
 
+  </div>
 
+  <script src="vue.js"></script>
 
+  <script>
 
+    new Vue({
 
+      el:"#app",
 
+      data:{
 
+        msg:'hello word'
 
+      },
 
+      methods:{
 
+        newMsg1(){
 
+          return this.msg.split('').reverse().join()
 
+        }
 
+      },
 
+      computed:{
 
+        /* 计算属性  依赖其他值计算出来的  缓存   不会重新计算   除非依赖的值有改动 */
 
+        newMsg2: function(){
 
+          return this.msg.split('').reverse().join()
 
+        }
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+</html>

+ 45 - 0
10_vue/8_计算属性和监听器.html
View File 

@@ -0,0 +1,45 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <div id="app">
 
+    <button @click="change()">修改</button>
 
+    <h2>姓: {{firstName}}</h2>
 
+    <h2>名: {{lastName}}</h2>
 
+    <h2>全称: {{fullName}}</h2>
 
+  </div>
 
+  <script src="vue.js"></script>
 
+  <script>
 
+    new Vue({
 
+      el:"#app",
 
+      data:{
 
+        firstName: 'zhang',
 
+        lastName: 'san'
 
+      },
 
+      methods:{
 
+        change(){
 
+          this.firstName = 'li'
 
+        }
 
+      },
 
+      watch:{
 
+        firstName: function(){
 
+          console.log(111)
 
+        },
 
+        lastName: function(){
 
+          console.log(222)
 
+        }
 
+      },
 
+      computed:{
 
+        fullName: function(){
 
+          return this.firstName + this.lastName
 
+        }
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+</html>