初學Vue（二） -- 模板、屬性、class及style

時間  2019-12-05
標籤 初學 vue 模板 屬性 class style 简体版
原文   原文鏈接

完整代碼連接javascript

模板 {{}}

當所謂的數據（data）發生改變的時候，輸出的內容會默認的從新渲染一遍，若是爲了安全起見想數據只渲染一遍再也不改動的話前面加個*就行了html

模板1
  • 當改爲這樣的時候點擊按鈕將不會再次渲染
html部分：    
<input type="button" @click="fn" value="點我">
    {{*msg}}

js部分：
    <script>
        new Vue({
            el:'body',
            data:{
                msg:'hello',
            },
            methods:{
                fn:function(){
                    this.msg='change';
                }
            }
        })
    </script>
模板2
  • Vue中輸出data爲html代碼應該怎麼顯示
  • 在Vue中 兩個花括號{{}}至關於原生js的innerText，三個花括號{{{}}}至關於原生js的innerHTML。
html部分：
    <style>
        div{
            width: 100px;
            height: 100px;
            background: black;
            color: white;
        }
    </style>

<body>
 //嘗試將這裏改成兩個看下是否正常顯示html標籤
{{{msg}}} 
</body>

js部分：
    <script>
        new Vue({
            el:'body',
            data:{
                msg:'<div>這裏是一個div</div>',
            }
        })
    </script>

注意：建議仍是用兩個花括號{{}}innerText，防止其餘人惡意注入vue

屬性 -- 經常使用屬性class及style

屬性 -- src
html部分：
    <style>
    img{
        height: 375px;
        width: 500px;
    }
    </style>
    <input type="button" value="change" @click="btn">
        //這裏的屬性若是用原生js的話須要使用vue模板才能接收到vue對象中的data
        //src="{{url}}"
    <img v-bind:src="url">
        
js部分：
    new Vue({
        el:'body',
        data:{
            //num 是計數器開關，用於控制圖片切換
            num:0,
            url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg",
        },
        methods:{
            btn:function(){
                this.num++;
                this.num%2==1?this.url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560472659224&di=896584de51fc9b26933157aed6a00ff7&imgtype=0&src=http%3A%2F%2Fimg08.oneniceapp.com%2Fupload%2Favatar%2F2018%2F05%2F05%2Faba7e29327a27abfcb1e525f623934ee.jpg":
                this.url="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg";
            }
        }
    })
  • 若是使用原生js的話須要使用vue模板{{}}若是使用vue方法的話則不須要
  • v-bind:scr="url"能夠縮寫前綴vue方法爲冒號:src="url"，這樣的寫法vue也能夠識別
屬性 -- class
  • 使用vue傳輸innerText的原理，傳輸文本做爲類名
html部分：
   <style>
       div{
           width: 100px;
           height: 100px;
           
       }
       .red{
        background: red;
       }
   </style>
    <input type="button" value="click" @click="btn">
    <div v-bind:class="myDiv"></div>
    <!-- 或者使用原生的 class="{{myDiv}}-->

js部分：
    <script>    
        new Vue({
            el:'body',
            data:{
                myDiv:'red',
            }
   })
    </script>

  • 通常賦予多個類的話在html中是class="a b c"，而在vue中則是以數組或json格式，由於json是鍵值對格式的，至關於數組的下標與索引值的關係。java

    • 什麼是鍵值對格式 -- key:value(例子：width:200px;)
    • 數組格式
html部分：
   <style>
       div{
           width: 100px;
           height: 100px;
           
       }
       .red{
        background: red;
       }
       .shadow{
        box-shadow: 0 0 15px;
       }
   </style>

    <input type="button" value="click" @click="btn">
    <div v-bind:class="myDiv"></div>

js部分：
    <script>
        //最經常使用的屬性‘class’‘style’    
        new Vue({
            el:'body',
            data:{
                //賦予多個class 屬性通常直接'class="a b c"' 在vue中則使用數組形式
                //['a','b','c']
                myDiv:['red','shadow'],
            },
            methods:{
                //切換class
                //方法‘pop()’是去除class的，方法‘push()’是插入class的
                //若是隻用‘pop’方法的話會一直去除class 樣式直到數組爲空
                btn:function(){
                    this.myDiv.length==1?this.myDiv.push('shadow'):this.myDiv.pop('shadow');
                }
            }
        })
    </script>
    • json格式
html部分：
   <style>
       div{
           width: 100px;
           height: 100px;
           
       }
       .red{
        background: red;
       }
       .shadow{
           box-shadow: 0 0 15px;
       }
       .animate{
           transition: 0.5s;
       }
   </style>

    <input type="button" value="click" @click="btn">
    <div v-bind:class="myDiv"></div>

js部分：
    <script>  
        new Vue({
            el:'body',
            data:{
                //使用json 格式也能夠
                myDiv:{
                    red:true,
                    shadow:true,
                    animate:true,
                    }
                },
                methods:{
               btn:function(){
                  this.myDiv.shadow=!this.myDiv.shadow;
                }
            }
        })
    </script>

Style三種傳輸格式

  • style在vue中有三種傳輸格式json

    • json
    • json數組 - [ json ,json ,json ]
    • string
  • 其中json與string格式差很少
json格式
  • 由於style原生的代碼原本就是相似於json格式的，因此能用json格式傳輸不出奇
html部分：
<input type="button" value="cahnge" @click="btn">
<div v-bind:style="myDiv"></div>

js部分：
    <script>
        new Vue({
            el:'body',
            data:{
                myDiv:{
                    width:"200px",
                    height:"200px",
                    background:"red",
                    transition:"0.5s"
                }
            },
            methods:{
                btn:function(){
                    this.myDiv.width="400px";
                    this.myDiv.height="400px";
                    this.myDiv.background="green";
                }
            }
        })    
    </script>
json數組形式
  • 就像賦予多個類，每一個類不一樣樣式同樣，你能夠定義多個類賦予給同一個標籤，一樣的也至關於賦予一個標籤多個不一樣做用域下的樣式，用json數組形式賦予檢查網頁代碼能夠看到樣式都給添加進去了
html部分：
<input type="button" value="cahnge" @click="btn">
//這裏給style賦予了兩個樣式    
<div v-bind:style="[myDiv,green]"></div>

js部分：
<script>
    new Vue({
    el:'body',
    data:{
        myDiv:{
            width:"200px",
            height:"200px",
            background:"red",
            transition:"0.5s"
        },
        green:{
            background:"green",
        }
    },
    methods:{
        btn:function(){
            this.myDiv.width="400px";
            this.myDiv.height="400px";
            this.myDiv.background="green";
        }
    }
})    
</script>

圖片描述

string形式
  • string形式其實和json格式的寫法同樣，可是特地拿出來講是由於他們的概念不同，string形式是利用vue的相似於innerText的操做來賦予樣式的，而json形式的概念突出他的數據格式
html部分：
<input type="button" value="cahnge" @click="btn">
<div v-bind:style="myDiv"></div>

js部分：
    <script>
        new Vue({
            el:'body',
            data:{
                myDiv:{
                    width:"200px",
                    height:"200px",
                    background:"red",
                    transition:"0.5s"
                }
            },
            methods:{
                btn:function(){
                    this.myDiv.width="400px";
                    this.myDiv.height="400px";
                    this.myDiv.background="green";
                }
            }
        })    
    </script>

小案例演示：vue-tab面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab面板</title>
    <script src="../vue.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #ccc;
        }
        input.active{
            background: red;
        }
    </style>
</head>
<body>
    
<!-- $index 是當前按鈕的下標值-->
<input type="button" v-for="i in value" :value="i" :class="$index==index?'active':''" @click="btn($index)">
<div v-for="i in inner" v-show="$index==index?true:false" >
    {{i}}
</div>
    <script>
        new Vue({
            el:'body',
            data:{
                index:0,
                value:['leo','sky','li'],
                inner:['今年18歲了','今年31歲了','今年22歲了']
            },
            methods:{
                btn:function(myIndex){
                    this.index=myIndex;
                }
            }
        })    
    </script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程