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

07-08 13:20 3458浏览

举报 T字号

大字

中字

小字

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>

动力节点在线课程涵盖零基础入门，高级进阶，在职提升三大主力内容，覆盖Java从入门到就业提升的全体系学习内容。全部Java视频免费观看，相关学习资料免费下载!对于火爆技术，每周一定时更新!如果想了解更多相关技术，可以到动力节点在线免费观看Vue入门视频教程学习哦!

0人推荐

共同学习，写下你的评论

0条评论

代码小兵988

67篇文章贡献228982字

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

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

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

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

相关课程更多>