关于vue指令v-show,v-bind的使用

最新推荐文章于 2023-03-14 15:25:01 发布

瘦瘦瘦瘦不了

最新推荐文章于 2023-03-14 15:25:01 发布

阅读量478

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/dreamy_wx/article/details/110498469

版权

vue 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

:class=“字符串/对象/数组(数组中可放字符串/对象)”
:style=“对象/数组(数组中可放对象)”

<style>
        .flagBox {
            background: #f00;
            width: 50px;
            height: 50px;
        }

        .red, .shows {
            background: pink;
            padding: 5px;
            border: 1px solid #000;
            margin-bottom: 10px
        }

        .color1 {
            color: #666;
            margin-bottom: 10px;
            padding: 5px;
            margin-bottom: 10px;
        }

        .border1 {
            border: 1px solid #865897;
            margin-bottom: 10px;
        }

        .bg1 {
            background: #ffcb6b
        }

        .classA {
            color: #f00
        }

        .classB {
            background: #666666
        }

        .classD {
            font-weight: bold
        }

        .classE {
            text-shadow: 0 1px 1px
        }

        .classF {
            color: #f00
        }
    </style>

<div id="app">
    <h1>v-show</h1>
    <button @click="flag=!flag">点击</button>
    <div v-show="flag" class="flagBox"></div>
    <hr/>
    <h1>v-bind 简写:</h1>
    <!-- 绑定一个 attribute  -->
    <h4>data中写法：imageSrc:"图片地址"</h4>
    <img :src="imageSrc" width="100px">
    <hr/>
    <h1>v-bind:class</h1>
    <h4>v-bind:class=字符串</h4>
    <div :class="`border1`">:class="`border1`" ---data中不用定义</div>
    <div :class="className1">:class="className1" ---data中写法className1:{border1:true,bg1:true}</div>
    <div :class="className2">:class="className2" ---data中写法className2:'color1 border1 bg1'</div>
    <div :class="className3">:class="className3" ---data中写法className3:['color1','border1','bg1']</div>
    <div :class="className4">:class="className4" ---className4:['color1',{border1:true},'bg1']</div>
    <hr/>
    <h4>v-bind:class=对象</h4>
    <div :class="{ red: isRed }">:class="{ red: isRed }" --- data中定义 isRed:true</div>
    <div :class="{ shows: true }">:class="{ shows: true }" ---data中不用定义</div>

    <hr/>
    <h4>v-bind:class=数组</h4>
    <div :class="[`border1`,`bg1`]">:class="[`border1`,`bg1`]" ---data中不用定义</div>
    <div :class="['classA', 'classB']">:class="['classA', 'classB']" ---data中不用定义</div>

    <hr/>
    <h4>v-bind:class=数组(字符串,对象)</h4>
    <div :class="[`border1`,{ shows: true }]">:class="[`border1`,{ shows: true }]" ---data中不用定义</div>
    <div :class="['classD', { 'classE': isE, 'classF': isF }]">:class="['classD', { 'classE': isE, 'classF': isF }]"
        ---isE isF在data中定义
    </div>
    <hr/>
    <h1>v-bind:style</h1>
    <!-- style 绑定 -->
    <h4>v-bind:style=对象</h4>
    <div :style="{fontSize: size + 'px',color:'#f00' }">:style="{fontSize: size + 'px',color:'#f00' }"--->font-size:
        12px; color: rgb(255, 0, 0);"---data中定义size:12
    </div>
    <div :style="{width: '80%',color:'#f00',border:'1px solid #000' }">:style="{width: '100px',color:'#f00',border:'1px
        solid #000' }"
    </div>
    <h5>绑定一个全是 attribute 的对象</h5>
    <div v-bind="{ id: someProp, 'other-attr': otherProp }">

        v-bind="{ id: someProp, 'other-attr': otherProp }"-->id="idBox"
        other-attr="name"-->data中定义：someProp:'idBox',otherProp:'name'
    </div>

    <h4>v-bind:style=数组</h4>
    <div :style="[{height:`50px`},{lineHeight:`50px`},{background:`pink`}]">
        :style="[{height:`50px`},{lineHeight:`50px`},{background:`pink`}]"
    </div>
    <hr/>
    <div :style="obj">:style="obj" ---obj在data中定义:obj:[{height:`50px`},{lineHeight:`50px`},{background:`gray`}]</div>
    <div :style="[styleObjectA, styleObjectB]">:style="[styleObjectA, styleObjectB]" -->style="height: 50px;
        line-height: 50px;" --->data中定义：styleObjectA:{height:`50px`},
        styleObjectB:{lineHeight:`50px`}
    </div>

</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            //v-show相关
            flag: true,
            //v-bind相关
            imageSrc: "图片URL",
            //:class相关
            isRed: true,
            className1: {
                color1: true,
                border1: true,
                bg1: true
            },
            className2: 'color1 border1 bg1',
            className3: ['color1', 'border1', 'bg1'],
            className4: ['color1', {border1: true}, 'bg1'],
            isE: true,
            isF: true,
            //:style相关
            size: 12,
            obj: [{height: `50px`}, {lineHeight: `50px`}, {background: `gray`}],
            styleObjectA: {height: `50px`},
            styleObjectB: {lineHeight: `50px`},
            someProp: 'idBox',
            otherProp: 'name'
        }
    })
</script>