Vue 中计算属性(computed)和侦听器(watch)

Vue 中计算属性(computed)和侦听器(watch)

<template>
    <div>
        <p>原始字符串: {{ message }}</p>
        <p>计算后反转字符串: {{ reversedMessage }}</p>
        
        
        <input type="text" v-model="foo" style="width: 50px"> +
        <input type="text" v-model="bar" style="width: 50px">
        <span>computed__求和__ <font color="#ff6b81">{{all}}</font></span>
        <ul v-for="(item) in allArr">
            <li v-if="item.id==2">{{item.name}} <font color="#ff6b81">{{item.price}}</font> 元</li>
            <li v-else>{{item.name}} <font>{{item.price}}</font> 元</li>
        </ul>
        
        
        <br>
        <br>
        <br>
        <input type="text" v-model="allCount">
        <font color="#ff6b81">watch__{{allCountWatch}}</font>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                message: 'Hello wolrd!',
                foo: 1,
                bar: 3,
                feiFoo: [
                    {id: 1, name: "史记 ___ ", price: 100},
                    {id: 2, name: "汉书 ___ ", price: 200},
                ],
                allCount: "开始监听",
                allCountWatch: "监后开始做事情",
            }
        },
        computed: {
            reversedMessage () {
                return this.message.split('').reverse().join('')
            },
            all () {
                this.feiFoo[1].price = Math.floor(Math.random()*10000);
                return Number(this.foo) + Number(this.bar);
            },
            "allArr":function (a,b) {
                return this.feiFoo;
            }
        },
        watch:{
            allCount(val) { // 监听到后做其他事情
                console.log(val);
                this.allCountWatch = `已经监听到__${val}`;
            }
        }
    };
</script>

<style scoped>
 
</style>

计算属性和侦听器

 

 

vue3中

只读属性

<template>
  <h3>计算属性(computed) 只有getter的计算属性</h3>
  <p>
    fistName: <input v-model="user.firstName"/><br>
    lastName: <input v-model="user.lastName"/><br>
    fullName1: <input v-model="fullName1" disabled/>  只是获取 <br>
  </p>
</template>

<script setup>
import {reactive, computed} from "vue";

const user = reactive({
  firstName: '孔',
  lastName: '仲尼'
})

// 只有getter的计算属性
const fullName1 = computed(() => {
  console.log('fullName1')
  return user.firstName + '-' + user.lastName
})

</script>

读和写2个属性

<template>
  <h3>计算属性(computed) 有getter与setter的计算属性</h3>
  <p>
    fistName: <input v-model="user.firstName"/><br>
    lastName: <input v-model="user.lastName"/><br>
    fullName2: <input v-model="fullName2"> 获取到,自己修改其他地方也改<br>
  </p>
</template>

<script setup>
import {reactive, computed} from "vue";

const user = reactive({
  firstName: '孔',
  lastName: '仲尼'
})

// 有getter与setter的计算属性
const fullName2 = computed({
  get () {
    console.log('fullName2 get')
    return user.firstName + '-' + user.lastName+'-'+'把我返回给set方法'
  },

  set (value) { // 获取到get方法的返回值,
    console.log('fullName2 set',value)
    const names = value.split('-')
    user.firstName = names[0]
    user.lastName = names[1]
  }
})

</script>