vue 基礎入門筆記 03:v-model、Class 與 Style 繫結

v-model 實現表單元素和data中的資料進行雙向繫結
:class 三種形式
- 陣列形式
- 三元表示式
- 用物件代替三元表示式（提高可讀性）
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>

本作品採用《CC 協議》，轉載必須註明作者和本文連結

日照香爐生紫煙

vue 基礎入門筆記 03:v-model、Class 與 Style 繫結

相關文章