vue 基礎入門筆記 03

click_man發表於2019-08-14
Vue筆記
1. v-bind  實現表單元素和model中的資料進行雙向繫結 
2. :class 三種形式
    * 陣列形式
    * 三元表示式 
    * 用物件代替三元表示式（提高可讀性）
3. style 
    * 鍵值對
    * 物件
<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .class1{
            font-size: 50px;
        }
        .class2{
            color: red;
        }
        .class3{
            font-weight: bold;
        }
        .class4{
           background-color: blue 
        }
        .active{
            color: aqua
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 實現表單元素和model中的資料進行雙向繫結 -->
        <label>{{msg}}</label>
        <input type="text" v-model="msg">
        <!-- .class -->
        <!-- 陣列形式 -->
        <input type="text" v-model='msg' :class='["class1","classs2"]'>
        <!-- 三元表示式 -->
        <input type="text" v-model='msg' :class='["class1","classs2",flag?"class3":"class4"]'>
        <!-- 使用物件來代替三元表示式 提高可讀性 -->
        <input type="text" v-model='msg' :class='[{"active":flag}]'>
        <!-- style 鍵值對形式 -->
        <h1 :style="{color:'red','font-weight':'bold'}">style</h1>
         <!-- style 鍵值對形式 -->
         <h1 :style="style">style</h1>
         <!-- 多個樣式 -->
         <h1 :style="[style,style2]">style</h1>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               msg:'hello world',
               flag:true,
               style:{color:'red','font-weight':'bold'},
               style2:{'font-size':'100px'}

           },
           methods:{}
        });
    </script>
</body>
</html>

日照香爐生紫煙

相關文章