這個我覺得是很重要的語法，而且不會難，
大家都可以玩玩再把它變型創新吧!

首先給大家看看數字的範例吧

    <div x-data="{ number: 1 }">
        <div x-text="JSON.stringify($data.number)"></div>
        <input type="text" x-model.number="number">
    </div>

在x-data="{ number: 1 }先定義了number為1(預設值)，
接著我們先看到input那行，
這裡的x-model.number="number"指定了要取x-model的number，
因此除了數字外，其他的都不會取(中間有其他文字後的數字同樣也不會取)，
再看看隔壁空的div，裡面寫了x-text="JSON.stringify($data.number)"
**x-text=""**意味著在這div內加入字串內的文字，
JSON.stringify()是將括號內的物件字串化，
而括號內的$data.number就對應到原先設定的x-data="{ number: 1 }裡面的number，
之後input中的x-model.number="number"會把原先的數字1取代掉，
所以上面的div中的文字都會隨著input裡面輸入任何數字一起變動了。

再給大家看看印出文字的部分吧

    <div x-data="{ bar: 'baz' }">
        <div x-text="bar"></div>
        <input type="text" x-model="bar">
    </div>

這跟上面的範例非常像吧!
但仔細看一下，
x-data="{ bar: 'baz' }"在x-data裡面將bar預設字串'baz'，
而input內x-model="bar"也就不用像上面範例一樣要指名為number格式，
在div就更為容易了，
x-text="bar"因為原來就是字串，所以也不需要再轉型。
是不是簡單多了呢~

最後在這補充一下，
第一個案例中x-text="JSON.stringify($data.number)"的**$data.**其實可加可不加，
x-text="JSON.stringify(number)"也是可行的，
同樣的，
第二個案例中<div x-text="bar"></div>改為<div x-text="$data.bar"></div>也可以呦。