侦听器和计算属性

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "pinia": "^2.0.21",
-        "vant": "^4.0.11",
+        "vant": "^4.1.0",
         "vue": "^3.2.38",
         "vue-router": "^4.1.6"
       },
@@ -820,9 +820,9 @@
       }
     },
     "node_modules/vant": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/vant/-/vant-4.0.11.tgz",
-      "integrity": "sha512-axVP6eHH4vGb5FQ2hqNhB5DykMSBQb0KK97HT4bVVFTYM81EJq1YImqOglzsVt3OC98NRoT01DIwt4y2n1iwVw==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-4.1.0.tgz",
+      "integrity": "sha512-wAcKaWjvWrmM4bSvyYxhh0LDe9KYFOKzNAgZBpJzokAuldnaUXQF8Dco7B30U2BglErxQC1NhqLCgnZoybOnqg==",
       "dependencies": {
         "@vant/popperjs": "^1.3.0",
         "@vant/use": "^1.5.0"
@@ -1397,9 +1397,9 @@
       "dev": true
     },
     "vant": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/vant/-/vant-4.0.11.tgz",
-      "integrity": "sha512-axVP6eHH4vGb5FQ2hqNhB5DykMSBQb0KK97HT4bVVFTYM81EJq1YImqOglzsVt3OC98NRoT01DIwt4y2n1iwVw==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-4.1.0.tgz",
+      "integrity": "sha512-wAcKaWjvWrmM4bSvyYxhh0LDe9KYFOKzNAgZBpJzokAuldnaUXQF8Dco7B30U2BglErxQC1NhqLCgnZoybOnqg==",
       "requires": {
         "@vant/popperjs": "^1.3.0",
         "@vant/use": "^1.5.0"

package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "pinia": "^2.0.21",
-    "vant": "^4.0.11",
+    "vant": "^4.1.0",
     "vue": "^3.2.38",
     "vue-router": "^4.1.6"
   },

src/main.js

@@ -7,13 +7,15 @@ import router from './router'
 import './assets/main.css'
 import 'vant/lib/index.css';
 
+import { Popup } from 'vant';
+
 import VConsole from 'vconsole';
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-
+app.use(Popup)
 app.mount('#app')
 
 

src/router/index.js

@@ -18,7 +18,16 @@ const router = createRouter({
         }, {
             path: 'webview/:page',
             component: () => import('../views/Webview.vue'),
-        }]
+        }, {
+            path: 'watch',
+            name: 'watch',
+            component: () => import('../views/Watch.vue')
+        },
+            {
+                path: 'computed',
+                name: 'computed',
+                component: () => import('../views/computed.vue')
+            },]
     }, {
         path: '/pure',
         name: 'pure',

src/router/menu.js

@@ -3,4 +3,6 @@ export default [
     {title: "计算器", path: '/calc'},
     {title: "购物车", path: '/webview/cart'},
     {title: "购物车（改）", path: '/webview/cart_fixed'},
+    {title: "侦听器", path: '/watch'},
+    {title: "计算属性", path: '/computed'},
 ]

src/views/CartViewFixed.vue

@@ -20,6 +20,13 @@
       你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
     </template>
   </submit-bar>
+
+  <van-popup
+      v-model:show="show"
+      closeable
+      position="bottom"
+      :style="{ height: '30%' }"
+  />
 </template>
 
 <script setup>
@@ -44,6 +51,8 @@ const add = (item) => {
   price.value += item.price
 }
 
+const show = ref(false)
+
 onMounted(() => {
 
   setTimeout(() => {
@@ -75,7 +84,9 @@ onBeforeMount(() => {
 })
 
 const checked = ref(false)
-const onSubmit = () => showToast('点击按钮');
+const onSubmit = () => {showToast('点击按钮')
+  show.value = true
+};
 const onClickLink = () => showToast('修改地址');
 
 </script>

src/views/Watch.vue

@@ -0,0 +1,30 @@
+<template>
+  <br><br>
+<slider v-model="price"></slider>
+  <van-popup v-model:show="show" :style="{ padding: '64px' }">你有一张优惠卷可以使用</van-popup>
+</template>
+
+<script setup>
+import {ref,watch} from "vue";
+import { Slider,Popup  } from 'vant'
+
+const price  = ref(0)
+const show = ref(false)
+
+watch(price, (val,oldVal) => {
+  if(val>70){
+    show.value = true
+  }
+})
+
+watch(price, (val,oldVal) => {
+  if(val<20){
+    show.value = true
+  }
+})
+
+</script>
+
+<style scoped>
+
+</style>

src/views/Webview.vue

@@ -6,6 +6,7 @@
 import {onMounted, ref} from 'vue'
 import {useRouter, useRoute} from 'vue-router'
 
+// const path = ref("https://cn.vuejs.org")
 const path = ref("#/pure/")
 const route = useRoute();
 const query = route.params.page

src/views/computed.vue

@@ -0,0 +1,53 @@
+<template>
+  <h1>{{ author.name }}有没有出过书:</h1>
+  <h2>{{ publishedBooksMessage }}</h2>
+  <cell-group v-for="item in author.books">{{ item }}</cell-group>
+  <cell-group inset>
+    <input :value="newbook" @blur="update" label="文本" placeholder="请输入书"/>
+    <button @click="submit">提交</button>
+  </cell-group>
+</template>
+
+<script setup>
+import {reactive, ref, computed} from "vue"
+import {CellGroup, Field, Button} from "vant"
+
+const author = reactive({
+  name: 'John Doe',
+  books: []
+})
+
+const newbook = ref("")
+
+// 一个计算属性 ref
+let publishedBooksMessage = computed({
+  get: () => {
+    let a = author.books.length > 0 ? 'Yes' : 'No'
+    if (newbook.value != "") {
+
+      a += "还有一本新书：" + newbook.value
+    }
+    return a
+  },
+  set: (val) => {
+    author.books.push("这家伙走后门")
+    console.log(val)
+  }
+})
+
+
+
+const update = (e) => {
+  newbook.value = e.target.value
+}
+
+const submit = () => {
+  // author.books.push(value.value)
+  // author.books.push(newbook.value)
+  publishedBooksMessage.value = "ok"
+}
+</script>
+
+<style scoped>
+
+</style>