图1 图书列表
图2 class和style的综合应用 代码可以截图或者复制黏贴放置在“调试过程及实验结果”中
图3 输出古诗 |
3. 补全代码，页面效果如下图3所示
|
3. 补全代码，页面效果如下图3所示
|
| 8.1 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>为指定书名添加颜色</title> <style> .item{ width:350px; height:100px; line-height:100px; border-bottom:1px solid #999999;} .item img{ width:100px; float:left} .active{ height:100px; line-height:100px; color:#FF0000 } </style> <script src="vue.js"></script> </head> <body> <div id="example"> <div> <div class="item" v-for="book in books"> <img v-bind:src="book.image"> <span v-bind:class="{active : book.active}">{{book.bookname}}</span> </div> </div> </div> <script type="text/javascript"> var vm = new Vue({ el:'#example', data:{ books : [{//定义图书信息数组 bookname : '零基础学JavaScript', image : 'images/javascript.png', active : true },{ bookname : '零基础学HTML5+CSS3', image : 'images/htmlcss.png', active : false },{ bookname : 'JavaScript精彩编程200例', image : 'images/javascript200.png', active : false },{ bookname : 'HTML5+CSS3精彩编程200例', image : 'images/htmlcss200.png', active : true }] } }) </script> </body> </html>
8.2 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>模拟古诗垂直显示文本</title> <script src="vue.js"></script> </head> <body> <div id="example"> <!-- 1、baseStyle设置背景色为lightblue, 2、fontStyle设置字体为36px,颜色为green，文本水平居中，字体类型为华文楷体 3、styleRadius设置边框样式1px solid #CCCCCC，文本垂直排列，设置边框阴影 --> <div v-bind:style="[baseStyle, fontStyle, styleRadius]"> <h4>枫桥夜泊</h4> <p> 月落乌啼霜满天，<br>江枫渔火对愁眠。<br>姑苏城外寒山寺，<br>夜半钟声到客船。 </p> </div> </div> <script type="text/javascript"> var vm = new Vue({ el:'#example', data:{ bgcolor : 'lightblue', family : "华文楷体", fontSize : 36, color : 'green', align : 'center', border : '1px solid #CCCCCC', mode : 'vertical-rl',//垂直方向自右而左的书写方式
}, computed: { baseStyle: function () {//基本样式 return{ 'background-color':this.bgcolor, } }, fontStyle: function(){//字体样式 return{ fontSize:this.fontSize+'px', color:this.color, 'text-align':this.align, 'font-family':this.family, } }, styleRadius: function () { return { border:this.border, 'writing-mode':this.mode,
} } } }) </script> </body> </html>
8.3 <!-- vue-3-6.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>class与style绑定综合应用实战</title> <script src="vue.js"></script> <style type="text/css"> .redP {color: red;font-size: 28px;font-weight: bold;} .class-a {color: green;font-size: 36px;font-weight: bolder;} .class-b {border: 1px dashed #0033CC;} .active {color: blue;text-decoration: underline;} </style> </head> <body> <div id="vue36"> <p v-bind:class="myClass">1.1 普通变量：Vue应用前景宽广！</p> <!-- 1.2 使用非内联的形式：classObject为一个对象，使用.class-a"和.class-b样式 --> <p :class="classObject">1.2 对象-非内联：Vue应用前景宽广！</p> <!-- 1.3 使用内联的形式：渲染.active样式 --> <div v-bind:class="{active: isActive }">1.3 对象-内联：Vue应用前景宽广！</div> <!-- 1.4 使用计算属性，渲染.class-a"和.class-b样式 --> <div v-bind:class="showClass">1.4 对象-计算属性：Vue应用前景宽广！</div> <div v-bind:class="[classA, classB]">1.5 数组：Vue非常好学！</div> <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">2.1 对象-内联：绑定style</div> <!-- 2.2 使用对象-非内联形式：通过styleObject对象实现字体大小为32px，边框为2px蓝色实线2px solid #0033CC --> <div :style="styleObject">2.2 对象-非内联：style对象</div> <div v-bind:style="[styleObjectA, styleObjectB]">2.3 数组：style数组</div> <!-- 2.4 使用计算属性，让2.4文本的color为blue，fontSize为32px --> <div v-bind:style="showStyle">2.4 对象-计算属性：Vue应用前景宽广！</div> </div> <script type="text/javascript"> var myViewModel = new Vue({ el: '#vue36', data: { myClass: 'redP',
isActive:true, classA: 'class-a', classB: 'class-b', activeColor: '#99DD33', fontSize: 36, classObject:{ 'class-a':true, 'class-b':true, }, styleObject: { border: '2px' + 'solid' + '#0033CC', fontSize: 32 + 'px', }, styleObjectA: { color: 'blue', fontSize: 36 + 'px' }, styleObjectB: { background: '#DFDFDF' } }, computed:{ showClass:function(){ return { 'class-a':true, 'class-b':true, } }, showStyle:function(){ return { color:'blue', fontSize:'32px', } } } }) </script> </body> </html> |
html+CSS+js部分基础运用17
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
