vue03

作者: 小可_34e0 | 来源:发表于2021-05-06 19:23 被阅读0次

    v-bind动态绑定class(对象语法)

    <head>
        <meta charset="UTF-8">
        <title>动态绑定class</title>
        <style>
            .active{
                color: aqua;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
        <button v-on:click="btnClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app=new Vue({
        el:'#app',
        data:{
          message:'你好,陈陈',
            isActive:true,
            isLine:true
        },
          methods:{
            btnClick:function (){
                this.isActive=!this.isActive
            }
          }
    
      })
    </script>
    </body>
    

    v-bind动态绑定class(数组语法)


    数组语法

    v-bind动态绑定style(对象语法)

    <body>
    <div id="app">
    <!--  <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>-->
      <h2 :style="{fontSize:finalSize+'px',backgroundColor:finalColor}">{{message}}</h2>
      <h2 :style="getStyle()">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app=new Vue({
        el:'#app',
        data:{
          message:'你好,陈陈',
          finalSize:100,
          finalColor:'red'
        },
        methods:{
          getStyle:function(){
            return{fontSize:this.finalSize+'px',backgroundColor:this.finalColor}
          }
        }
      })
    </script>
    </body>
    

    动态绑定style数组语法


    数组语法

    计算属性:


    图1
    图2
    案例二:计算书本总价格:
    <body>
    <div id="app">
      <h2>总价格:{{totalPrice}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app=new Vue({
        el:'#app',
        data:{
          books:[
            {id:110,name:'数据结构',price:100},
            {id:111,name:'数据',price:12},
            {id:112,name:'结构',price:10},
            {id:113,name:'数据结构123',price:40},
          ]
        },
        computed:{
          totalPrice:function(){
            let result=0
            for(let i=0;i<this.books.length;i++){
              result+=this.books[i].price
            }
            return result
            //另外两种for写法
            // for (let i in this.books){
            //   this.books[i]
            // }
            // for (let book of this.books){}
          }
        }
      })
    </script>
    </body>
    

    相关文章

      网友评论

          本文标题:vue03

          本文链接:https://www.haomeiwen.com/subject/kblcdltx.html