Vue的四个常用选项

最新推荐文章于 2022-11-21 11:12:22 发布

webjxb

最新推荐文章于 2022-11-21 11:12:22 发布

阅读量288

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_43659504/article/details/90524131

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue的四个常用选项

1.filters过滤器
2.computed计算属性
3.methods方法
4.watch监听

直接上代码，并不难理解：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            数字1：{{num1 | toInt}} <br> 
            数字2：{{num2 | toInt}} <br>
            数字3：{{num3 | toInt}} <br>
            总和： {{ sum }} <br>
            a:{{ a }}
            <button v-on:click="plus">点击+1</button>
        </div>
    
        <script src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    num1:1.345,
                    num2:6.891,
                    num3:3.547,
                    a:0
                },
                filters: {
                    toInt(value) {
                        return parseInt(value);
                    }
                },
                computed: {
                    sum() {
                        return this.num1 + this.num2 + this.num3;
                    }
                },
                methods: {
                    plus(){
                        this.a++;
                    }
                },
                watch: {
                    a(){
                        console.log(`a变化了,最新值${this.a}`);
                    }
                }
            });
        </script>
    </body>
    </html>

webjxb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的四个常用选项

Vue的四个常用选项 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
复制链接

扫一扫