提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

03-动态绑定属性

属性 动态 绑定 03
2023-09-14 09:14:09 时间

01-v-bind的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--错误的做法：这里不可以使用mustache语法-->
    <img src="{{imgURL}}" alt="">

    <!--正确的做法：使用v-bind指令-->
    <img v-bind:src="imgURL" alt="">

    <a v-bind:href="aHref">百度一下</a>

    <!--语法糖的写法-->
    <img :src="imgURL" alt="">
    <a :href="aHref"></a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好！',
            imgURL: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13209289359%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666084442&t=56160636c6c4488ead478c04bbab9c8e',
            aHref: 'http://www.baidu.com'
        }
    })

</script>
</script>
</body>
</html>

02-v-bind动态绑定class(一)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .active {
        color: red;
    }
</style>
<body>

<div id="app">
    <h2 class="active">{{message}}</h2>
    <h2 v-bind:class="active">{{message}}</h2>
    <h2 :class="active">{{message}}</h2>
    <!--class="{key:value}"-->
    <h2 v-bind:class="{active:true,line:true}">{{message}}</h2>
    <h2 :class="{active:false,line:false}">{{message}}</h2>
    <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
    <h2 :class="{active:isActive,line:isLine}">{{message}}</h2>

    <button v-on:click="btnClick">变色按钮</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好！',
            active: 'active',
            isActive: true,
            isLine: true
        },
        methods: {
            btnClick: function () {
                this.isActive = !this.isActive;
            }
        }
    })

</script>
</script>
</body>
</html>

03-v-bind动态绑定class(数组语法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .active {
        color: red;
    }
</style>
<body>

<div id="app">
    <h2 class="title" :class="[active,line]">{{message}}</h2>
    <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好！',
            active: 'aaaa',
            line: 'bbbb',
        },
        methods: {
            getClasses: function () {
                return [this.active, this.line];
            }
        }
    })

</script>
</script>
</body>
</html>

04-作业(v-for和v-bind的结合)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .active {
        color: red;
    }
</style>
<body>
<!--作业需求：点击列表中的哪一项，那么该项的文字变成红色-->
<div id="app">
    <ul>
        <li v-for="m in movies">{{m}}</li>
        <li v-for="(m,index) in movies">{{index}}-{{m}}</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            movies: ['海贼王', '火影忍者', '蜡笔小新', '美食的俘虏'],
        }
    })

</script>
</script>
</body>
</html>

05-v-bind动态绑定style(对象语法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
    <!--<h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>-->

    <!--'50px'必须加上单引号，否则是当做一个变量去解析-->
    <p :style="{fontSize:'50px'}">{{message}}</p>

    <!--finalSize和finalColor当成一个变量去使用-->
    <p :style="{fontSize:finalSize,color:finalColor}">{{message}}</p>

    <p :style="getStyles()">{{message}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀',
            finalSize: '100px',
            finalColor: 'red',
        },
        methods: {
            getStyles: function () {
                return {fontSize: this.finalSize, color: this.finalColor}
            }
        }
    })

</script>
</script>
</body>
</html>

06-v-bind动态绑定style(数组语法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
    <h2 v-bind:style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀',
            baseStyle: {backgroundColor: 'red'},
            baseStyle1: {fontSize: '50px'},
        }
    })

</script>
</script>
</body>
</html>

相关文章