vue入門實踐，style和數據綁定

時間 2019-11-08

標籤 vue 入門實踐 style 數據綁定简体版

原文原文鏈接

初階版

須要注意的地方css

因爲方塊變化框與下方ctrl部分共享一個動態參數counter，因此這兩部分要包裹在同一個id之下，實現數據共享。html
給style添加綁定以後，因爲樣式參數要動態變化，因此直接將整個綁定的樣式參數都放入computed中處理，返回值是一個樣式的object。vue

/*html 片斷*/
<li class="block" v-for="n in counter" v-bind:style="styleObject"></li>

/*js 片斷*/
data:{
       counter:0,
            },
computed:{
        styleObject : function(){
                    return {
                        width: initWidth - this.counter * 20 +'px',
                    }
                }
            }

附：完整代碼函數

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
   <div id="ctrl">
       <ul id="show" class="wrap">
            <li class="block" v-for="n in counter" v-bind:style="styleObject"></li>
        </ul>
        <div class="wrap">
            <button v-on:click="counter += 1">加一層</button>
            <p>這個按鈕被戳了{{counter}}次</p>
        </div>
   </div>

    <script src="ventor/vue.js"></script>
    <script>
        var initWidth = 300;

        var vm = new Vue({
            el:'#ctrl',
            data:{
                counter:0,
            },
            computed:{
                styleObject : function(){
                    return {
                        width: initWidth - this.counter * 20 +'px',
                    }
                }
            }
        })

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

進階版

思路this

在v-for循環中，增長index參數，利用index對每一個block賦予不一樣的寬度值。用v-if控制，當最後一塊的寬度計算結果小於0的時候，中止循環生成，只計數，並顯示提示。spa

在負責提示的p標籤中添加v-if，讓這個元素到了知足條件的時候纔在DOM樹中生成code

//html
<div id="ctrl">
       <ul id="show" class="wrap">
            <li class="block" v-for="(n,index) in counter" v-if="index<11" v-bind:style="styleObject(index)"></li>
        </ul>
        <div class="wrap">
            <button v-on:click="counter += 1">加一層</button>
            <p>這個按鈕被戳了{{counter}}次</p>
            <p v-if="counter>10">{{warning}}</p>
        </div>
   </div>

注意htm

v-for裏面的value、index參數，只在本身渲染的塊中有效，沒法在同一個實例下的其它地方使用。對象

//js
var initWidth = 300;

var vm = new Vue({
            el:'#ctrl',
            data:{
                counter:0,
                warning:'',
            },
            methods:{
                styleObject : function(index){
                    if(initWidth - index * 30>0){
                        return {
                            width: initWidth - index * 30 +'px',
                        }
                    }else{
                        this.warning = '已經到最底層啦！';
                        return {
                            width:0,
                        }
                    }
                }
            }
        })

注意blog

vm實例中，使用methods進行傳參的函數調用（computed不具有傳參的功能）
v-bind:style 的methods函數要返回style鍵值對
雙向數據綁定的數據對象不用寫在return中

附：完整代碼

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<!--  倒金字塔-->
   <div id="ctrl">
       <ul id="show" class="wrap">
            <li class="block" v-for="(n,index) in counter" v-if="index<11" v-bind:style="styleObject(index)"></li>
        </ul>
        <div class="wrap">
            <button v-on:click="counter += 1">加一層</button>
            <p>這個按鈕被戳了{{counter}}次</p>
            <p v-if="counter>10">{{warning}}</p>
        </div>
   </div>

    <script src="ventor/vue.js"></script>
    <script>
//        倒金字塔
        var initWidth = 300;

        var vm = new Vue({
            el:'#ctrl',
            data:{
                counter:0,
                warning:'',
            },
            methods:{
                styleObject : function(index){
                    if(initWidth - index * 30>0){
                        return {
                            width: initWidth - index * 30 +'px',
                        }
                    }else{
                        this.warning = '已經到最底層啦！';
                        return {
                            width:0,
                        }
                    }
                }
            }
        })

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。