Vue.js從0到1：v-bind指令

weixin_33758863發表於2018-09-02
Vue.js

Vue.js從0到1：v-bind 指令

1. 程式碼演示 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>v-bind</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script type="text/javascript" src="../asserts/js/vue.js"></script>
</head>
<body>
 <h1>v-bind</h1>
 <hr>
 <div id="app">
    <img v-bind:src="imgSrc">
    <a :href="webUrl" target="_blank">百度</a>
    <hr>
    <div :class="className" >繫結class</div>
    <div :class="{classA:isOk}">繫結class，判斷</div>
    <div :class="[classA,classB]">繫結class陣列</div>
    <div :class="isOk?classA:classB">繫結class 三元表示式</div>
    <div :style="{color:red,fontSize:font}">繫結style</div>
    <div :style="styleObject">用物件繫結style</div>
    <hr>
    <div>
        <input type="checkbox" id="isOk" v-model="isOk">
        <label for="isOk">isOk={{isOk}}</label>
    </div>
 </div>
 <style>
     .classA{
         color: green;
     }
     .classB{
         font-size: 150%; 
     }
 </style>
 <script type="text/javascript">
     var app = new Vue({
         el:'#app',
         data:{
             message:'hello Vue!',
             imgSrc:"https://cdn2.jianshu.io/assets/default_avatar/4-3397163ecdb3855a0a4139c34a695885.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240",
             webUrl:"http://www.baidu.com",
             className:"classA",
             classA:"classA",
             classB:"classB",
             isOk:true,
             red:"red",
             font:"20px",
             styleObject:{
                 color:"red",
                 fontSize:"24px"
             }
         }
     });

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

  1. v-bind ：

    繫結 : 繫結class、繫結style
    學習連結： 技術胖

相關文章