Vue-4【class绑定、style绑定、条件渲染】

最新推荐文章于 2023-12-11 18:13:08 发布

可乐雪碧薄荷糖

最新推荐文章于 2023-12-11 18:13:08 发布

阅读量219

点赞数

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

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/110733591

版权

Vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

一.class绑定

v-bind:class动态绑定属性

普通的类和绑定的类是可以共存的

(1).字符串绑定

要在样式名称上加''因为要解析成字符串

 <style>
        .active{
            color: #f40
        }
    </style>
</head>
<body>
    <div id="root">
        <span :class="'active'">wwww</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#root'
        })
    </script>

(2).条件绑定

通过{类名:条件来实现}

 <style>
        .active{
            color: #f40
        }
    </style>
</head>
<body>
    <div id="root">
        <span :class="{active:isShow}">wwww</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                isShow:false
            }
        })
    </script>
    对象绑定将值直接赋值为true即可
     <div id="root">
        <span :class="{active:true}">wwww</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                
                    isShow:true,
                    lg:true
                
            }
        })
    </script>

(3).不用内联的方式

变相的通过获取跟实例属性实现

 <div id="root">
        <span :class="classObj">wwww</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                classObj:{
                    active:true
                }
            }
        })
    </script>

(4).类名为kebab-code情况

用短横线定义的类名必须要用引号括起来

<style>
        .active{
            color: #f40
        }
        .btn-lg{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="root">
        <span :class="{active:isShow,'btn-lg':lg}">wwww</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                
                    isShow:true,
                    lg:true
                
            }
        })
    </script>

(5).数组绑定

<style>
        .active{
            color: #f40
        }
        .btn-lg{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="root">
        <span :class="[isShow,]">wwww</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                
                    isShow:'active',
                    lg:'btn-lg'
                
            }
        })
    </script>

二.style绑定

:style="{}"中书写完成

属性值用''包裹

(1).字符串绑定

用{}包裹，遇到-类的属性用''包裹或者写成驼峰

<div id="root">
        <span :style="{'font-size':'20px',color:'red'}">wwww</span>
    </div>

(2).类绑定

<div id="root">
        <span :style="styleObj">wwww</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                styleObj:{
                    'font-size':'20px',
                    color:'red'
                }
               
                
            }
        })
    </script>

(3).数组绑定

<div id="root">
        <span :style="[styleObj,addStyle]">wwww</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                styleObj:{
                    'font-size':'20px',
                    color:'red'
                },
                addStyle:{
                    textShadow:'0 0 3px yellow'
                }
               
                
            }
        })
    </script>

三.条件渲染

(1).v-if/v-else-if/v-else

为true显示div 为false为隐藏

<div id="root">
        <span v-if="show">{{message}}</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
               message:"Hello World",
               show:true            
            }
        })
    </script>

elseif/else演示

<div id="root">
       <div v-if="weather === '太阳'">晴天</div>
       <div v-else-if="weather === '多云'">多云</div>
       <div  v-else-if="weather === '雨天'"> 雨天</div>
       <div v-else>其它</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
               weather:"11",
                
            }
        })
    </script>

如果在elseif else中插入其它代码块是会报错的

(2).多个dom元素的条件渲染

通过外层盒子包裹

通过template外层包裹，这样即可不改变结构

使用外层盒子包裹
  <div id="root">
        <span v-if="show">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        </span>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
               message:"Hello World",
               show:true            
            }
        })
    </script>
    
使用外层template包裹

(3).v-show

让包裹的元素display：noe

通过true false控制，也可写在data中

<div id="root">
        <div v-show="true">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
               message:"Hello World",
               show:true            
            }
        })
    </script>

v-show是display=none 了而不是像v-if一样直接不存在与dom结构中

v-show不支持template，尽管为false还是会显示

v-show和v-else结合也会报错

(4).输入框的值不会改变

当改变了第一个Input里显示效果后，第一个input的临时数据值会显示在第二个input上

<div id="root">
        <div v-if="show">
            Username:<input type="text"/>
        </div>
        <div v-else>
            e-mail:<input type="text"/>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#root',
            data:{
                show:"true",
                
            }
        })
    </script>

通过给input添加key值就可以了

<div v-if="show">
            Username:<input type="text" key="username"/>
        </div>
        <div v-else>
            e-mail:<input type="text" key="email"/>
        </div>

可乐雪碧薄荷糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-4【class绑定、style绑定、条件渲染】

一.class绑定v-bind:class动态绑定属性普通的类和绑定的类是可以共存的(1).字符串绑定要在样式名称上加''因为要解析成字符串 <style> .active{ color: #f40 } </style></head><body> <div id="root"> <span :class="'active'..
复制链接

扫一扫