练涛

vue学习——v-bind

v-bind比较简单

  • v-bind绑定数据和元素属性
        <a v-bind:href="url">点击</a>
  • 快捷写法,一个冒号
        <a :href="url">点击</a>
  • v-bind绑定class
        <div :class="klass"></div>
  • 甚至我们可以给它设置一个开关 isShow为true or false
        <div :class="{test: isShow}"></div>

练习demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>v-bind指令</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        .background{
            background-color: green;
            width: 300px;
            height: 300px;
        }
        .test{
            background-color: yellow;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind绑定数据和元素属性  -->
        <a v-bind:href="url">点击</a>
        <!-- 快捷写法 一个冒号 -->
        <a :href="url">点击</a>

        <!-- v-bind绑定class -->
        <div :class="klass"></div>
        <!-- 甚至我们可以给它设置一个开关 isShow为true or false -->
        <div :class="{test: isShow}"></div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data:{
                url:"https://baidu.com",
                klass:"background",
                isShow: true
            }
        })
    </script>
</body>
</html>
posted @ 2018-10-16 23:47  练涛  阅读(260)  评论(0)  编辑  收藏  举报