v-bind指令使用

weixin_45703831

已于 2024-04-15 21:10:23 修改

阅读量112

点赞数 2

文章标签： vue.js

于 2024-04-01 21:16:37 首次发布

本文链接：https://blog.csdn.net/weixin_45703831/article/details/137247017

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<style>
    .class1{
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
    .class2 {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    .class3{
        color: red;
    }
</style>
<body>
    <!-- 
         v-bind指令的作用：绑定变量以及样式，简写方式是-> ' : '
    -->
<div id='app'>
    <a v-bind:href="url">百度一下</a>
    <!-- v-bind指令简写方式 -->
    <a :href="url2">淘宝一下</a>
    
    <!-- 绑定样式的方式 -->
    <div class="box">
        <!-- 通过“对象方式”控制样式变化：{类名:布尔值} -->
        <!-- 解释：假设布尔值为真，那么就显示class1这个样式，假设为假，就不显示 -->
        <div v-bind:class="{class1:bool}">这是盒子一</div>

        <!-- 通过“数组”控制样式：['类名1'，'类名2'] -->
        <!-- 解释：假设既需要class1的样式又需要class2的样式，就可以使用这种方式 -->
        <div v-bind:class="['class2','class3']">这是盒子二</div>

        <!-- 通过三元表达式："条件1:条件2?'条件成立执行这里':'条件不成立执行这里'" -->
        <!-- 翻译：num1的值大于num2吗？大于就显示class1样式,否则就显示class2样式 -->
        <div :class="num1>num2?'class1':'class2'">这是盒子三</div>
    </div>
</div>
</body>
<script>
        new Vue({
            el:'#app',
            data:{
                // 这里存放的就是后期会改动的数据
                // 为什么要放在这里？
                // 假设在页面上写死了地址，后期项目有改动需要改地址时候，要我们自己手动去改很麻烦
                // 所以把这个地址变成一个变量，后期只要从数据库那里修改就行【因为data数据可以直接从数据库中获取】
                url:"http://www.baidu.com",
                url2:"http://www.taobao.com",
                bool:true,
                num1:30,
                num2:20
            }
        })
</script>

</html>