vue入门实践，style和数据绑定

初阶版

需要注意的地方

由于方块变化框与下方ctrl部分共享一个动态参数counter，所以这两部分要包裹在同一个id之下，实现数据共享。
给style添加绑定之后，由于样式参数要动态变化，所以直接将整个绑定的样式参数都放入computed中处理，返回值是一个样式的object。

/*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>

进阶版

思路

在v-for循环中，增加index参数，利用index对每个block赋予不同的宽度值。用v-if控制，当最后一块的宽度计算结果小于0的时候，停止循环生成，只计数，并显示提示。

在负责提示的p标签中添加v-if，让这个元素到了满足条件的时候才在DOM树中生成

//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>

注意

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,
                        }
                    }
                }
            }
        })

注意

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>

vue入门实践，style和数据绑定

初阶版

进阶版

盛夏光年

引用和评论

笔记 | Node.js基础开发指南

前端开发工具

开发插件集合

2024最全ECharts 实战大全（速记版+资源）

Vue.js-方法与事件

Vue使用mixins

startViewTransition的简单示例