vue3.js

    1.         总结: 此处涉及的vue3新特性<br />            1, vue3废除了过滤器,不再支持其语法<br />            2, vue3中实现数据过滤建议使用计算属性代替<br />            3, vue3中在setup函数中使用Vue.computed()定义计算属性
    1. <body>
    2.     <script src='./vue3.js'></script>
    3.     <div id='myApp'>
    4.         <button @click="count++">
    5.             {{count}}-{{count2}}-{{count | countFilter}}-{{count3}}-{{countFilter}}
    6.         </button>
    7.     </div>
    8.     <script>
    9.         var vm = {
    10.             computed:{
    11.                 count2(){
    12.                     // setup中return的响应式数据在组件中用this调用即可
    13.                     console.log(this.count)
    14.                     return this.count * 2
    15.                 }
    16.             },
    17.             // vue3语法中废除了过滤器, 不再支持过滤器语法
    18.             filters: {
    19.                 countFilter(data){
    20.                     return  `(${data})`
    21.                 }
    22.             },
    23.             setup() {
    24.                 const count = Vue.ref(0);
    26.                 // vue3使用Vue.computed()定义计算属性, 参数是计算函数,返回值是计算结果
    27.                 var count3 = Vue.computed(()=>{
    28.                     return count.value * 3
    29.                 })
    30.                 // vue3推荐使用计算属性代替过滤器
    31.                 var countFilter = Vue.computed(()=>{
    32.                     return  `(${count3.value})`
    33.                 })
    36.                 return{
    37.                     count, count3, countFilter
    38.                 }
    39.             }
    40.         }
    41.         Vue.createApp(vm).mount('#myApp')
    42.     </script>
    43. </body>