vue中的樣式綁定以及條件渲染，列表渲染

簡單的點擊div實現顏色的切換(通過class屬性實現)
a：代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的樣式綁定</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
    <style>
        .activated{
            color: red;
        }
    </style>
</head>    
<body>
    <!--直接調用方法-->
    <div id="root">
        <div @click="handlerClick"
             :class="{activated:isActivated}">
            Hello World
        </div>
    </div>
    <script>
         var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項
             el:'#root',
             data:{
                isActivated:false
             },
             methods: {
                handlerClick:function(){
                    this.isActivated = !this.isActivated;
                }
             },
            });        
    </script>
</body>
</html>

通過class的數組屬性實現上面的顏色切換效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的樣式綁定</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
    <style>
        .activated{
            color: red;
        }
    </style>
</head>    
<body>
    <!--直接調用方法-->
    <div id="root">
        <div @click="handlerClick"
             :class="[activated]">
            Hello World
        </div>
    </div>
    <script>
         var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項
             el:'#root',
             data:{
                activated:""//通過這個變量去控制顏色的有無
             },
             methods: {
                handlerClick:function(){
                    if(this.activated==="activated"){
                        this.activated = "";
                    }else{
                        this.activated ="activated";
                    }
                }
             },
            });        
    </script>
</body>
</html>

通過style的屬性實現上面的顏色切換效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的樣式綁定</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <!--可以是:style="styleObj"
            也可以是:style="[styleObj]"
        -->
        <div :style="styleObj" @click="handlerClick">
            Hello World
        </div>
    </div>
    <script>
         var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項
             el:'#root',
             data: {
                styleObj:{
                    color:"black"
                }
             },
             methods: {
                handlerClick:function(){
                    if(this.styleObj.color==="black"){
                        this.styleObj.color = "red"
                    }else{
                        this.styleObj.color = "black"
                    }
                }
             },
            });        
    </script>
</body>
</html>

v-if條件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的樣式綁定</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <div v-if="show">{{message}}</div>
        <div v-else>Bye</div>
    </div>
    <script>
         var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項
             el:'#root',
             data: {
                message:"Hello",
                show:false
             }
            });        
    </script>
</body>
</html>

當改變show變量值得時候，展示數據

代碼2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的樣式綁定</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <div v-if="show==='a'">This is a</div>
        <div v-else-if="show==='b'">This is b</div>
        <div v-else>Bye</div>
    </div>
    <script>
         var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項
             el:'#root',
             data: {
                show:'a'
             }
            });        
    </script>
</body>
</html>

v-show和v-if的區別
a：代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的樣式綁定</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <div v-if="show" data-test="v-if">{{message}}</div>
        <div v-show="show" data-test="v-show">{{message}}</div>
    </div>
    <script>
         var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項
             el:'#root',
             data: {
                message:"Hello",
                show:false
             }
            });        
    </script>
</body>
</html>

可以發現v-show是直接隱藏div，而v-if 是直接刪除和添加，所以v-show的性能要高一些。

使用v-for去渲染列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的樣式綁定</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
        <!--把v-for放到template中，我們只需要循環一次即可-->
        <template v-for="(item,index) in list" :key="item.id">
            <div>
                {{item.text}}-----{{index}}
            </div>
            <span>
                {{item.text}}
            </span>
        </template>
    </div>
    <script>
         var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項
             el:'#root',
             data: {
                list:[{
                    id:"001",
                    text:"name1"
                },{
                    id:"002",
                    text:"name2"
                }]
             }
            });        
    </script>
</body>
</html>

v-for對對象的循環操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的樣式綁定</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
            <div v-for="(item,key,index) in userInfo">
                {{item}}-----{{key}}-----{{index}}
            </div>
    </div>
    <script>
         var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項
             el:'#root',
             data: {
                userInfo:{
                    name:"name1",
                    age:"28",
                    gender:"male"
                }
             }
            });        
    </script>
</body>
</html>

如何動態的修改userInfo中的數據呢？可以使用set方法解決：

下面一種也行：

如果userInfo是一個數組也是可以的：
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的樣式綁定</title>
    <!--引入vue.js文件-->
    <script src="./vue.js"></script>
</head>    
<body>
    <div id="root">
            <div v-for="(item,index) in userInfo">
                {{item}}-----{{index}}
            </div>
    </div>
    <script>
         var app = new Vue({//創建一個vue的實例，裏面的都是一些配置項
             el:'#root',
             data: {
                userInfo:[1,2,3,4]
             }
            });        
    </script>
</body>
</html>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

vue中的樣式綁定以及條件渲染，列表渲染

如何使用 JS 判斷用戶是否處於活躍狀態

Mono 支持LoongArch架構

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

將Docker容器轉移至另一服務器部署

使用vagrant安裝centos7虛擬機

文章目錄2

使用docker安裝nginx

使用docker+nginx部署vue項目

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結