前端学习-Vue-part2 (计算属性设置setter、html中的class绑定、条件渲染v-if,v-show)

Vue计算属性设置——setter

setter用于设置计算属性,同步更新源数据的值,自己在学习Python中的类时,setter和getter时接触过这个,感觉应该是差不多的意思。
前端学习-Vue-part2 (计算属性设置setter、html中的class绑定、条件渲染v-if,v-show)_第1张图片
前端学习-Vue-part2 (计算属性设置setter、html中的class绑定、条件渲染v-if,v-show)_第2张图片

<body>
    <div id="myApp">
        <p>商品原价{{price}}美元,含税价格{{priceinTax}}美元,折合人民币价格{{priceinChia}}元p>
        <button @click="btnClick(300)">将含税价格设置为300美元button>
    div>

    <script>
        var myApp = new Vue({
            el:"#myApp",
            data:{
                price:200,
            },
            computed:{
                priceinTax:{
                    get: function(){
                        return Math.round(this.price*1.08);
                    },
                    set: function(value){
                        this.price = Math.round(value/1.08);
                    },
                },
                priceinChia: function(){
                    return Math.round(this.priceinTax*6);
                }
            },
            methods:{
                btnClick:function(newPrice){
                    this.priceinTax = newPrice;
                }
            }
        })
    script>
body>

分析一下:

  • 更改含税价格后,商品的原价和折合人民币的价格也一起更改。
  • 注意,因为折合的只需要显示计算结果,所有没有像priceinTax设置setter属性,其实computed属性中的priceinChina也可更改为只带有getter的如下形式:
priceinChia:{
                    get: function(){
                        return Math.round(this.priceinTax*6);
                    }
                }
  • 观察一下代码的结构,初次显示时,priceinTaxpriceinChina调用了计算属性中的getter获取基于变量数值price的含税价格和折算成人民币价格;接着按钮触发计算属性中priceinTaxsetter,重新设定三个数值的值。到这里,我对computed中的gettersetter理解为:getter用于获取元数据,setter用于更改元数据。

Vue绑定标签中的Class属性——v-bind

使用v-bind可以实现绑定html中的标签中的class属性,目的时动态得改变某个页面块的样式,其实之前已经接触过v-bind了,非常强大的特性,还可以用来绑定id等其他的标签元素属性。被绑定的class可以根据情况动态地显示或不显示,下面的例子使用按钮触发文本的颜色切换:(文本颜色由黑变红,就不贴俩图了,css文件自行设置一下,就一个color属性改一哈)

<body> 
    <div id="myApp">
        <p v-bind:class="{red_font:isActive}">文本内容p>
        <button v-on:click="changeColor">切换文本颜色button>
    div>

    <script>
        var myApp = new Vue({
            el:"#myApp",
            data:{
                isActive:false,

            },
            methods:{
                changeColor: function(){
                    this.isActive = !this.isActive;
                },
            },
        });
    script>
body>
  • 分析一下:老样子,挂载id,设置data,methods中定义切换文本的函数,使用v-on绑定button中的click事件,绑定的事件名为changeColor每次点击都会改变isActive的值,在truefalse之间来回切换
  • js中的布尔变量是truefalse,注意不需要大写。

Vue使用 v-bind class对象绑定

和上一个使用v-bind绑定class属性的用法很像,这里绑定多个class,且通过事件触发。换句话说,如果现在需要对一个对象含有的多个class进行切换,可以这么使用

<body>
    <div id="myApp">
        <p :class="style">文本内容p>
        <button v-on:click="chage_style">切换样式button>
    div>

    <script>
        var myApp = new Vue({
            el:"#myApp",
            data:{
                style:{
                    red_font :false,
                    big:false,
                },       
            },
            methods:{
                chage_style:function(){
                    this.style.red_font = !this.style.red_font;
                    this.style.big = !this.style.big           
                }        
            }                
        })
    script>
body>

分析一下:之前的一个例子是通过isActive来控制吗,某个class是否显示,这里是直接把所有的样式都丢进style属性/字典中,通过style保存多个样式的内容,当某个事件被触发时,可以直接更改style中的内容来进行样式变换。和之前绑定class的属性对比起来,有种函数和类中的method的差异感觉。

Vue 条件渲染 v-if

使用v-if能实现虚拟DOM,是Vue中十分好用的一个特性,能够根据条件对指定页面块进行条件渲染,白话就是根据条件判断显示啥,条件渲染用到Vue的三个关键词v-if, v-else-if, v-else看个例子:

<body>
    <div id="myApp">
        <p v-if="result == 0">成绩未公布p>
        <p v-else-if="result < 60">{{result}}分,考试不及格!p>
        <p v-else-if="result < 80">{{result}}分,还需努力!p>
        <p v-else>{{result}}分,很不错,加个鸡腿!p>
        <button v-on:click="getScore">查询成绩button>
    div>
    <script>
        var myApp = new Vue({
            el:"#myApp",
            data:{
                result:0,
            },
            methods:{
                getScore:function(){
                    this.result = Math.round((Math.random()*100));
                },
            },

        })
    script>
body>

分析一下:

  • 可以发现四个

    标签最终只会显示一个,虚拟DOM让页面的逻辑渲染十分清晰。"result"data中声明,初始为0。{{result}}显示分数,是因为通过el挂载了整个
    块。
  • v-on绑定更改分数的鼠标单击事件,使用Math.random()生成[0,1]的随机数。

html中元素的显示 v-show

v-showv-if都是条件渲染,但是v-show绑定变量结果为false时不显示,但是在DOM中还是存在的,只是css的样式displaynone
v-if需要增删DOM元素,对计算的资源消耗大,当需要频繁切换显示或不显示时,推荐使用v-show,不过吧,实际情况中我们需要针对多种情况进行条件判断,可能用v-if的时候比较多。看看下面这个例子:

<body>
<div id="myApp">
    <p v-show="is_show">正文文本p>
    <button v-on:click="toggle_display">隐藏/显示文本button>
div>

<script>
    var myApp = new Vue({
        el: "#myApp",
        data:{
            is_show:true
        },
        methods:{
            toggle_display:function(){
                this.is_show = !this.is_show;
            }
        }
    })
script>
body>

分析一下:

  • 如果点击了切换按钮,原来的元素会消失,并且按钮上移,但是打开调试界面会发现,

    标签还是存在的,只是display属性被更改为none
    前端学习-Vue-part2 (计算属性设置setter、html中的class绑定、条件渲染v-if,v-show)_第3张图片

你可能感兴趣的:(Vue)