• vue(6)v-bind指令


    1.v-bind指令用于给html标签的属性赋值,如<h1 v-bind:title="msg">test</h1>。任意属性都可以使用这样的用法

    2.v-bind:title可以简写为:title,如<h1 :title="msg">test</h1>

    3.:title="",""中也可以使用简单运算,如果在""中希望加入字符串用''括起来,如<h1 v-bind:title="msg+'qqqqqqqqq'">test</h1>

    4.给style属性用上面的方式赋值的时候,如果有多个样式""中使用数组的方式表示,如: <div :style="[bColor,width,height]"></div>

    4.1.:style的""中也支持对象的方式,类似:<div :style="{backgroundColor:'red','100px',height:'100px'}"></div>

    5.class属性用v-bind赋值和style一样,多个class值时用数组的方式。

    6.给class属性赋值的时候还有一种用法,在style中我们写一个.box的样式,在div中如果我们应用box这个样式时,原始html的用法就直接给class属性附上box这个值就可以了。

    当然可可以用5的方式定义一个变量值为box然后在:class的""中加入这个变量就可以了。

    还有这种用法<div :class="{box:box}"></div>,在""中不在是一个数组[]而是一个对象{},box:box,前面一个box代表box样式,后面一个box是vue的data中定义的一个变量,它是一个bool类型的,如果box变量为true则给div的class属性附上box值即应用样式,如果为flase则不应用样式。

    <div :class="{box:box}"></div>这里如果样式名box和bool值box的名称相同,可以简写<div :class="{box}"></div>

    7.实际应用中一个标签的样式往往很多,直接书写在html标签中比较复杂,我们可以在vue组件中定义一个方法来返回对应数组或者对象,然后再v-bind的""中直接调用该方法即可。

    8.代码:

    <template>
        <div>
           <h1 v-bind:title="msg">test</h1>
           <h1 :title="msg">test</h1>
           <h1 v-bind:title="msg+'11111111111'">test</h1>
           <a v-bind:href="url">baidu</a>
           <a :href="url">baidu</a>
           <div :style="[bColor,width,height]">div0</div>
           <div :style="{backgroundColor:'red','100px',height:'100px'}"></div>
           <div :class="{box:box}">div1</div>
           <div :class="{box}">div2</div>
           <div :class="useStyle()">div3</div>
        </div>
    </template>

    <script>
    export default {
       name:"App",
       data:function(){
           return {
                msg:'this is a test',
                url:'http://www.baidu.com',
                bColor:'red',
                ' 100px',
                height:'height: 100px',
                box:true,
                };
       },
       methods:{
           useStyle:function(){
               return {'box':this.box};
           }
       }
    }
    </script>

    <style scoped>
        .box{
            background-color: blue;
             100px;
            height: 100px;
        }
    </style>
    9.页面效果:
  • 相关阅读:
    水晶报表关于System.Web.Extensions报错的问题
    个人下一步学习计划
    一个老程序员对数据库的一点纠结
    Visual SourceSafe权限配置记录
    SQL SERVER 2008代码折叠小技巧
    用命令行自动备份数据库到其他服务器
    CrystalReports 2008序列号留档
    ····
    C语言中的static
    页面自动刷新的几种方法
  • 原文地址:https://www.cnblogs.com/maycpou/p/14695463.html
Copyright © 2020-2023  润新知