v-bind 绑定属性

与mustache相区别，他是对内容（content内部）进行修改的。v-bind的语法糖写法是：

v-bind 动态绑定class属性：v-bind：class="对象名"。/v-bind：class=‘['数组']’

v-bind：class=“{键1：‘值1’，键2：‘值2’}” Vue在解析的时候，key可以不用加单引号当做字符串进行处理，value加上单引号，当成变量值进行处理；

<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in items" :style="aaa">{{index}}-{{item}}</li>
        <li v-for="(item,index) in items" :style="[background,background1]">{{index}}-{{item}}</li>
    </ul>
</div>
<script>
    const vm=new Vue({
        el:'#app',
        data:{
            id:1,

            name:'Vue',
            avatar:"http://pic44.nipic.com/20140723/18505720_094503373000_2.jpg",
            count:[1,2,3,4,5],
            items:["海王","火影忍者","海贼王","进击的巨人"],
            active:'active',
            aaa:{
                color: 'chocolate' ,
                fontSize:"100px"

            },
            background:{
                color:"blue"
            },
            background1:{
                fontSize: "100px"
            }
        },
        method:{

        }
    })
</script>

//计算属性

<body>
<div id="app">
    <p>{{fullname}}</p>
    <p>{{fullname1()}}</p>
</div>
<script>
    const vm=new Vue({
        el:'#app',
        data: {
            data1:"我是",
            date2:"曹润芝"
        },
        methods:{
          fullname1(){
              return this.data1+this.date2;
          }
        },
        computed:{
          fullname:function () {
              return this.data1+this.date2;
          }
        }
    })
</script>

<body>
<div id="app">
    <p>总价格：{{totalprice}}</p>
</div>
<script>
    const vm=new Vue({
        el:'#app',
        data: {
            books:[{id:110, name:"编程应用0", price:119},
                    {id:111, name:"编程应用1", price:119},
                    {id:112, name:"编程应用2", price:119},
                    {id:113, name:"编程应用3", price:119},
                    {id:114, name:"编程应用4", price:119},
            ]
        },
        computed:{
            totalprice:function () {
                let result=0;
                for (let i=0;i<this.books.length;i++){
                    result+=this.books[i].price;
                }
                return result;
            }
        }
    })
</script>
</body>

猜你喜欢