computed: {
    //属性名() { return 返回值 }
    total() {
      return 0
  },

<template>
      split：字符串函数,将字符串按照指定的字符分割成数组
      reverse：数组函数，将数组数据反转
      join：数组函数，将数组按照指定的字符拼接成字符串
    {{'ABC'.split('').reverse().join('')}}
    {{msg}}
</template>
<script>
export default {
  computed: { //计算属性：可以实时进行计算的变量
    msg() {
      return 'XYZ'.split('').reverse().join('')
</script>
<style>
</style>

<template>
    <!-- 1.1 2个input -->
    <input type="text" v-model="firstName">





    
    <input type="text" v-model="secondName">
    <!-- 2.2 触发函数 -->
    <input type="button" value="显示" @click="exeName"> <br>
    fullName : {{fullName}} <br>
    <!-- 3.2 显示结果 -->
    fullName2 :     {{fullName2}} <br>
</template>
<script>
export default {
  data() {
    return {
      // 1.2 两个变量 + 1个变量
      firstName: '',
      secondName: '',
      fullName: ''
  methods: {
    // 2.1 声明函数
    exeName() {
      this.fullName = this.firstName + this.secondName
  computed: {
    // 3.1 声明计算属性
    fullName2() {
      // 格式：姓为'张',名为'三',全称为'张三'
      return this.firstName + this.secondName
</script>
<style>
</style>

filter: {   





    
  过滤器名称(已有数据) {        
  return 处理结果    
}}

filter: {
    过滤器名称(已有数据, 变量1,变量2,... ) {
        return 处理结果
}

<template>
      {{num | parseNum }}
</template>
<script>
export default {
    data() {
        return {
            num: 123.456
    filters: {
        parseNum( value ) {
            // 数字保留2位小数
            //  Number(内容) ：将指定内容转换数字
            //  toFixed：数字对象函数，按照四舍五入，截取小数位数





    
            return Number(value).toFixed(2)
</script>
<style>
</style>

data() {
    return {
watch: {
    变量() {      //data.变量的监听处理函数
}




    

data() {
    return {
        对象变量：{
            属性1: 值,
            属性2: 值,
watch: {
    对象变量: {
        handler() {},   //处理函数
        deep: true      //深度监听，属性值发生变化时，也可以监听
}

<template>
    <table border="1">
          <input type="checkbox" name="" id="">
        <td>编号</td>
        <td>标题</td>
        <td>价格</td>
        <td>数量</td>
        <td>日期</td>
        <td>小计</td>
      <tr v-for="(product,index) in productList" :key="index">
          <input type="checkbox" name="" id="">
        <td>{{product.pid}}</td>
        <td>{{product.title}}</td>
        <td>{{product.price}}</td>
          <a href="" @click.prevent="product.count--">-</a>
          {{product.count}}
          <a href="" @click.prevent="product.count++">+</a>
        <td>{{product.createDate}}</td>
          <!-- 小计：单价 * 数量 -->
          {{product.price * product.count}}
        <td></td>





    
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>总计：</td>
          <!-- 总计：所有小计的和 -->
    </table>
</template>
<script>
export default {
  data() {
    return {
      productList: [  //模拟商品数据
          pid: 'p001',
          title: '衣服',
          price: '998.45',
          count: '9',      //购买数量
          createDate: '2022-03-07 11:28:45'
          pid: 'p002',
          title: '电脑',
          price: '9768.76',
          count: '10',      //购买数量
          createDate: '2022-03-07 11:28:45'
</script>
<style>
</style>

  computed: {
    //属性名() { return 返回值 }
    total() {
      let sum = 0 ;
      this.productList.forEach(product => {
        // 小计的和
        sum += (product.price * product.count)
      return sum
                Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（项目演示、涉及知识点、源码分享）
            
Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（项目演示、涉及知识点、源码分享）
                Vue实例—— 计算属性（computed）、 watch 状态监听和filter 过滤器
            
Vue实例—— 计算属性（computed）、 watch 状态监听和filter 过滤器