Vue属性绑定指令 -- v-bind

Vue属性绑定指令 -- v-bind

可简写为 ：

普通属性:页面可解析为id=“4”

<p v-bind:id="2*2">{{msg}}</p>

class属性绑定
<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
    .red {
        background: red;
    }
    .big {
        font-size: 4em;
    }
</style>

<body>
    <div id="app">
        <p class='red'>这是一个p段落标签...</p>
         <!--绑定red属性  -->
        <p v-bind:class='redColor'>这是一个p段落标签...</p>   
         <!-- 当点击时，属性值切换 -->
        <p @click="flag=!flag" :class='{red:flag}'>这是一个p段落标签...</p>
        <!-- 绑定big和red属性 -->
        <p class='big' :class="{'red':true}">这是一个p标签..</p>
         <!-- 以数组形式绑定big和red属性 -->
        <p :class="['big','red']">这是一个p标签..</p>
         <!-- 绑定big,判断flag的值是否为true，为true时绑定red属性 -->
        <p :class="['big',(flag?'red':'')]">这是一个p标签..</p>
        <!-- 绑定big,判断flag的值是否为true，为true时绑定red属性 -->
        <p class='big' :class='flag?"red":""'>这是一个p标签..</p> 
        <!-- 行内样式绑定 -->
        <p :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</p>  
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                redColor:'red',
                flag:true,
                activeColor: 'green',
	            fontSize: 30
            }
        })
    </script>
</body>

</html>
posted @ 2020-08-11 12:13  Cupid05  阅读(289)  评论(0)  编辑  收藏  举报