【vue.js】定义vue实例的四个常用选项——filters、computed、methods、watch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
    <script src="vue.js"></script>
</head>
<body>

    <!--例1：双向数据绑定——实时监控输入内容-->
    <div id="app">
        <input v-model="number">
        <p>数字:{{ number }}</p>
    </div>

    <!--例2：组件化——封装注册名为card的组件-->
    <div id="comp">
        <card></card>
        <card></card>
        <card></card>
    </div>

    <!--例3：filters过滤器的使用——讲过滤条件写入函数中-->
    <div id="filter">
        <p>数字1：{{ num1 | toInt }}</p>
        <p>数字2：{{ num2 | toInt }}</p>
        <p>数字3：{{ num3 | toInt }}</p>
    </div>

    <!--例4：computed计算属性的使用-->
    <div id="compute">
        {{num1}}+{{num2}}+{{num3}}={{sum}}
    </div>

<!--例5：methods方法的使用-->
<div id="method">
    {{num}}<input type="button" value="加1" v-on:click="plus">
    {{numNow}}<!--问题：任何监控到num变化时对numNow值进行修改？？？-->
</div>
</body>
<script>

    /*例1*/
    let vm = new Vue({
        el:"#app",
        data:{
            number:"",
        }
    });

    /*例2*/
    Vue.component('card',{
        template:`
            <div style="border:1px solid black;">
                <input type="button" value="button">
                <p>My name is liuting!</p>
            </div>
            `
    });
    new Vue({
        el:"#comp"
    });

    /*例3*/
    let vm3=new Vue({
        el:"#filter",
        data:{
            num1:342.214,
            num2:353.124,
            num3:34.4352
        },
        filters: {
            toInt(value) {
                return parseInt(value);
            }
        }
    });

    /*例4*/
    let vm4=new Vue({
        el:"#compute",
        data:{
            num1:123,
            num2:324,
            num3:32
        },
        computed:{
            sum(){
                return this.num1+this.num2+this.num3;
            }
        }
    });

    /*例5 + 例6：watch检测数据发生变化的api*/
    let vm6=new Vue({
        el:"#method",
        data:{
            num:0,
            numNow:""
        },
        methods:{
            plus(){
                return this.num++;
            }
        },
        watch:{
            num(){
                console.log(`num最新值：${this.num}`);
            }
        }
    });
</script>
</html>
【vue.js】定义vue实例的四个常用选项——filters、computed、methods、watch

猜你喜欢
