Vue3基础学习笔记（二）Vue基础语法4-样式绑定语法和条件渲染

最新推荐文章于 2023-11-25 11:20:16 发布

smellsummer

最新推荐文章于 2023-11-25 11:20:16 发布

阅读量142

点赞数

分类专栏： vue基础学习笔记文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/smellsummer/article/details/131248931

版权

vue基础学习笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

样式绑定语法

class绑定

字符串形式
对象形式
数组形式

    <style>
        .red{
            color: red;
        }
        .green{
            color: green;
        }
        .blue{
            color: blue;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script> 
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app= Vue.createApp({
        data(){
            return{
                // ①字符串形式
                classString:'red',
                // ②对象形式
                classObject:{red:false,green:true},
                // ③数组形式
                classArray:['red','green', { blue: true }],
            }
        },
        template:`
            <div v-bind:class="classString">hello</div>
            <div :class="classObject">hello</div>
            <div :class="classArray">hello</div>`


    });
    const vm = app.mount('#root');
</script>

实现效果：
在这里插入图片描述
通过控制台修改数据，颜色发生变化

组件上绑定class

子组件中的template子级只有一个元素，可以在父组件中子组件标签上添加class 改变子组件样式

<script>
    const app= Vue.createApp({
        data(){
            return{
                classString:'red',
                classObject:{red:true,green:false},
                classArray:['red','green',{ brown:false}],
            }
        },
        template:`
                <demo class='blue'></demo>
                <demo :class='classString'></demo>
                <demo :class='classObject'></demo>
                <demo :class='classArray'></demo>`
    });
    app.component('demo',{
        template:`
            <div>hello</div>
            `
    })
    const vm = app.mount('#root');
</script>

实现效果：
在这里插入图片描述

子组件template子级有多个元素，vue 会不知道到底是把 green 加到第一个节点，还是第二个节点，这种情况可以直接在子组件标签身上添加class样式

<script>
    const app= Vue.createApp({
        data(){
            return{
                classString:'red',
                classObject:{red:true,green:false},
                classArray:['red','green',{ brown:false}],
            }
        },
        template:`
                <demo :class='classString'></demo>
                `
    });
    app.component('demo',{
        template:`
            <div class="red">hello1</div>
            <div class="green">hello2</div>

            `
    })
    const vm = app.mount('#root');
</script>

实现效果：
在这里插入图片描述

或使用 $attrs，子组件使用父组件属性上的class的值（子组件继承父组件样式）

<script>
    const app= Vue.createApp({
        data(){
            return{
                classString:'red',
                classObject:{red:true,green:false},
                classArray:['red','green',{ brown:false}],
            }
        },
        template:`
                <demo :class='classString'></demo>
                `
    });
    app.component('demo',{
        template:`
            <div :class='$attrs.class'>hello1</div>
            <div :class='$attrs.class'>hello2</div>

            `
    })
    const vm = app.mount('#root');
</script>

style绑定

<script>
    const app= Vue.createApp({
        data(){
            return{
               	//①字符串形式
                styleString:'color:red',
                //②对象形式
                styleObject:{
                    color:'blue',
                    background:'yellow'
                }
            }
        },
        template:`
             <div :style="styleString">hello1</div>
             <div :style="styleObject">hello2</div>
        `
    });
    const vm = app.mount('#root');
</script>

实现效果：
在这里插入图片描述

条件渲染

v-if和v-show

v-if：适用于绑定条件很少改变情况
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染
v-show：适用于频繁的显示隐藏情况
始终会被渲染，通过style样式的display属性来切换，隐藏display：none

    const app= Vue.createApp({
        data(){
            return{
                show:false,
            }
        },
        template:`
            <div v-if="show"> hello1</div>
            <div v-show = "show">hello2</div>
            `
    });
    const vm = app.mount('#root');
</script>

显示效果：都不显示，但是v-show中的hello2存在，只是display：none
在这里插入图片描述

v-else

<script>
    const app = Vue.createApp({
        data(){
            return{
              condition: false
            }
        },
        methods: {
            handleClick(){
                this.condition = !this.condition
            }
        },
        template: `
            <button @click="handleClick">按钮</button>
            <div v-if="condition">v-if:condition为true</div>
            <div v-else>v-else:condition为false</div>
        `
    })   
    const vm = app.mount('#root') 
</script>

实现效果：
在这里插入图片描述

v-else-if

<script>
    const app = Vue.createApp({
        data(){
            return{
              type:'B',
            }
        },
        methods: {
            handleClick(){
                this.condition = !this.condition
            }
        },
        template: `
            type:<input v-model="type"></input>
            <div v-if="type==='A'">v-if:A</div>
            <div v-else-if="type==='B'">v-else-if:B</div>
            <div v-else-if="type==='C'">v-else-if:C</div>
            <div v-else>v-else:NOT ABC</div>
        `
    })   
    const vm = app.mount('#root') 
</script>

实现效果：
在这里插入图片描述

smellsummer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue3基础学习笔记（二）Vue基础语法4-样式绑定语法和条件渲染

字符串形式对象形式数组形式.redcolor;.bluecolor;</</</</</constcreateAppdatareturn// ①字符串形式'red'// ②对象形式redfalsegreentrue// ③数组形式classArray'red''green'bluetruetemplate;</实现效果：通过控制台修改数据，颜色发生变化。
复制链接

扫一扫