Vue.js学习详细课程系列--共32节（2 / 6）

ゞ浴缸里的玫瑰 2023-09-25 21:13 95阅读 0赞

#### Vue.js学习课程（2 / 6） ####

*   *   *  07. 过滤器
         *   *   *  知识点
                 *  filters
         *  08. 计算属性
         *   *   *  知识点
                 *  computed
         *  09. 观察属性
         *   *   *  知识点
                 *  $watch
         *  10. 设定机算属性
         *   *   *  知识点
                 *  setter
         *  11. Class绑定
         *   *   *  知识点
                 *  v-bind:class
         *  12. Class对象绑定
         *   *   *  知识点
                 *  v-bind:class

#### 07. 过滤器 ####

###### 知识点 ######

*  filters

###### filters ######

格式化变量内容的输出。（日期格式化，字母大小写，数字再计算等等）

<div id="myApp">
        <p>{
       {message}}</p>
        <p>{
       {message | toupper }}</p>
        <hr>
        <p>现在的vue.js学习进度是{
       {num}}({
       {num | topercentage}})。</p>
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp',
            data: {
          
                message: 'hello vue.js world.',
                num: 0.3
            },
            filters: {
          
                toupper: function(value){
          
                    return value.toUpperCase();
                },
                topercentage: function(value){
          
                    return value * 100 + '%';
                },
            },
        });
    </script>

#### 08. 计算属性 ####

###### 知识点 ######

*  computed

###### computed ######

处理元数据，便于进行二次利用。（比如：消费税自动计算功能）

<div id="myApp">
        今年3月3日发卖的任天堂新一代主机Switch的价格是：{
       {price}}円，含税价格为：{
       {priceInTax}}円，折合人民币为：{
       {priceChinaRMB}}元。
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp',
            data: {
          
                price: 29980
            },
            computed: {
          
                priceInTax: function(){
          
                    return this.price * 1.08;
                },
                priceChinaRMB: function(){
          
                    return Math.round(this.priceInTax / 16.75);
                },
            },
        });
    </script>

#### 09. 观察属性 ####

###### 知识点 ######

*  $watch

###### $watch ######

与computed属性类似，用于观察变量的变化，然后进行相应的处理。（我从Angular而来）

<div id="myApp">
        <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{
       {price}}円，含税价格为：{
       {priceInTax}}円，折合人民币为：{
       {priceChinaRMB}}元。</p>
        <button @click="btnClick(10000)">加价10000円</button>
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp',
            data: {
          
                price: 29980,
                priceInTax: 0,
                priceChinaRMB: 0,
            },
            watch: {
          
                price: function(newVal, oldVal){
          
                    console.log(newVal, oldVal);
                    this.priceInTax = Math.round(this.price * 1.08);
                    this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
                },
            },
            methods: {
          
                btnClick: function(newPrice){
          
                    this.price += newPrice;
                },
            },
        });
    </script>

#### 10. 设定机算属性 ####

###### 知识点 ######

*  setter

###### setter ######

设置计算属性，同步更新元数据的值。（又是令人费解的描述）

<div id="myApp">
        <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{
       {price}}円，含税价格为：{
       {priceInTax}}円，折合人民币为：{
       {priceChinaRMB}}元。</p>
        <button @click="btnClick(10800)">把含税改价为10800円</button>
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp',
            data: {
          
                price: 29980
            },
            computed: {
          
                priceInTax: {
          
                    get:function(){
          
                        return this.price * 1.08;
                    },
                    set: function(value){
          
                        this.price = value / 1.08;
                    }
                },
                priceChinaRMB: function(){
          
                    return Math.round(this.priceInTax / 16.75);
                },
            },
            methods: {
          
                btnClick: function(newPrice){
          
                    this.priceInTax = newPrice;
                },
            },
        });
    </script>

#### 11. Class绑定 ####

###### 知识点 ######

*  v-bind:class

###### v-bind:class ######

为html标记绑定样式单class属性。

<div id="myApp">
        <div v-bind:class="{active:isActive}">红色文本1</div>
        <div :class="{active:isActive}">红色文本2</div>
        <button @click="btnClick">改变class吧</button>
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp',
            data: {
          
                isActive: true,
            },
            methods: {
          
                btnClick: function(){
          
                    this.isActive = false;
                },
            },
        });
    </script>

#### 12. Class对象绑定 ####

###### 知识点 ######

*  v-bind:class

###### v-bind:class ######

为html标记绑定样式单class对象。

<div id="myApp">
        <div :class="myClass">红色文本</div>
        <button @click="btnClick">改变class吧</button>
    </div>
    <script>
        var myApp = new Vue({
          
            el: '#myApp',
            data: {
          
                myClass: {
          
                    active: true,
                    big: true,
                },
            },
            methods: {
          
                btnClick: function(){
          
                    this.myClass.big = false;
                },
            },
        });
    </script>