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

news/2024/5/22 17:09:19

初阶版

clipboard.png

需要注意的地方

  • 由于方块变化框与下方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>

进阶版

clipboard.png

思路

  • 在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>

http://lihuaxi.xjx100.cn/news/241477.html

相关文章

Java23种设计模式学习笔记【目录总贴】

创建型模式&#xff1a;关注对象的创建过程 1、单例​模式&#xff1a;保证一个类只有一个实例&#xff0c;并且提供一个访问该实例的全局访问点 主要&#xff1a; 饿汉式&#xff08;线程安全&#xff0c;调用效率高&#xff0c;但是不能延时加载&#xff09; 懒汉式&#xff…

mysql complete_mysql 无意重启 [Note] /usr/sbin/mysqld: Normal shutdown

情况&#xff1a;今早发现&#xff0c;昨天下午安装的4台mysql服务器&#xff0c;突然出现&#xff0c;由于在shell窗口(rootlocalhost:mysql.sock) [(none)]> 190102 18:12:16 mysqld_safe mysqld from pid file /home/data/mysqldata/3306/data/mysql3.pid ended什么情况&…

软件项目管理重点总结

文章目录概论走进项目管理把控环境&#xff0c;控制过程整合项目资源控制项目范围保障项目进度驾驭项目成本保证项目质量协调项目人力资源改善项目的沟通应对项目风险关注项目的采购和外包概论 项目的定义&#xff1a;为创造一个特定的产品、服务或者成果而采取的临时性的努力…

Linux系统/boot目录破损无法启动怎么办

豌豆贴心提醒&#xff0c;本文阅读时间5分钟&#xff0c;文末有秘密&#xff01;linux系统中的/boot目录存放着系统开机所需要的各种文件&#xff0c;其中包含内核、开机菜单及所需配置文件等等。但是当不小心删除了/boot目录里的某些文件或者干脆整个/boot目录都不见了的情况下…

mysql 表的继承,MySQL是否支持表继承?

I have this code in PostgreSQLCREATE TABLE first (id serial,primary key(id));CREATE TABLE second (primary key(id)) INHERITS (first);What is the equivalent code for MySQL?解决方案MySQL does not support table inheritance. The only way to approximate the fun…

SpringBoot学习之路:09.Spring Boot中添加Filter应用

2019独角兽企业重金招聘Python工程师标准>>> 上篇文章中说了SpringBoot中是如何使用servlet的&#xff0c;本文将讲解在SpringBoot中对过滤器Filter的实现 一.编写MyFilter实现Filter接口 package com.maxbill.core.webbox.filter;import org.apache.log4j.Logger;i…

计算机网络中的协议数据单元的控制信息主要包括哪些内容

在计算机网络的数据传输过程中会对数据进行封装&#xff0c;俗称加头(链路层还会加尾)&#xff0c;增加的控制信息主要包括以下内容&#xff1a; 地址(Address)&#xff1a;用来标识发送端或接收端差错检测编码(Error-detecting code)&#xff1a;用于差错检测或纠正协议控制(…

“”开天眼“”,天地分割效果

每日一句&#xff1a;Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. (源于&#xff1a;nodejs的官网) 翻译&#xff1a;nodejs使用了事件驱动&#xff0c;非阻塞I/o的模型&#xff0c;这些模型是的它运行起来轻便而且有效率…