index.html
<div id="myPet"><!--v-bind指令，能够获取从数据库中传递的动态数据，在这里它通过vue实例中的data绑定元素中的src、herf--><img v-bind:src="catSrc" alt="cat"/><img v-bind:src="dogSrc" alt="dog"/><a v-bind:href="url01">大嘴狗宠物店</a><br/><!--可以使用语法糖，用:代替v-bind:--><img :src="catSrc" alt="cat"/><img :src="dogSrc" alt="dog"/><a :href="url01">大嘴狗宠物店</a></div><script src="../js/vue.js"></script><script src="../js/demo.js"></script>
demo.js
let myPet = new Vue({el: '#myPet',data: {catSrc: '.jpg!q70.jpg',dogSrc: '.jpg!q70.jpg',url01: '/'}
})
运行结果：
index.html
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">@import "../css/render.css";</style>
</head>
<body><div id="myBtn"><h2>请问斋藤飞鸟是你的女神吗？</h2><img id="myImg" :src="myUrl" alt="myGoddess"/><br/><br/><!--:class="{key01: boolean, key02: boolean}"，当key01为true时，class="key01"，然后显示class为key01的css样式。同样的，当key02为true时,界面也会显示key02的css样式。--><button :class="{btn01: isBtn01, btn02: isBtn02}" v-on:click="myClick" ref="#">YES</button></div><script src="../js/vue.js"></script><script src="../js/demo.js"></script></body>
render.css
#myImg{width: 50em;height: 30em;
}
.btn01 {box-shadow: 0 1px 0 0 #fff6af;background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);background-color:#ffec64;border-radius:6px;border:1px solid #ffaa22;display:inline-block;cursor:pointer;color:#333333;font-family: Arial, serif;font-size:15px;font-weight:bold;padding:6px 24px;text-decoration:none;text-shadow:01px 0 #ffee66;
}
.btn01:hover {background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);background-color:#ffab23;
}
.btn01:active {position:relative;top:1px;
}.btn02 {box-shadow:inset 0 1px 0 0 #dcecfb;background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);background-color:#bddbfa;border-radius:6px;border:1px solid #84bbf3;display:inline-block;cursor:pointer;color:#ffffff;font-family: Arial, serif;font-size:15px;font-weight:bold;padding:6px 24px;text-decoration:none;text-shadow:0 1px 0 #528ecc;
}
.btn02:hover {background:linear-gradient(to bottom, #80b5ea 5%, #bddbfa 100%);background-color:#80b5ea;
}
.btn02:active {position:relative;top:1px;
}
demo.js
let myBtn = new Vue({el: '#myBtn',data:{url01: '=3469048138,2470937702&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',url02: '=3024324849,2907534436&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',isBtn01: true,isBtn02: false,myUrl: this.url01,counter: 0},methods:{myClick: function(){this.isBtn01 = !this.isBtn01;this.isBtn02 = !this.isBtn02;if (unter === 0){Url = this.unter ++;}else{Url = this.unter --;}}}
})
运行结果：
点击按钮之前，图片和按钮的样式是这样的，this.isBtn01 = true;
this.isBtn02 = false; Url = this.url01
点击按钮之后，图片和按钮的样式更改了,this.isBtn01 = flase;
this.isBtn02 = true; Url = this.url02
再次点击按钮，图片和按钮的样式恢复原样 ,this.isBtn01 = true;
this.isBtn02 = false; Url = this.url01
注意
我们也可以使用使用getclasses（）方法，
html文件 :
<button :class="{btn01: isBtn01, btn02: isBtn02}" v-on:click="myClick" ref="#">YES</button><!--如果觉得麻烦，可以使用getClasses()方法，将{btn01: isBtn01, btn02: isBtn02}作为该方法的return值，其效果和上面的一样。--><button :class="getClasses()" v-on:click="myClick" ref="#">YES</button>
js文件
methods:{myClick: function(){this.isBtn01 = !this.isBtn01;this.isBtn02 = !this.isBtn02;if (unter === 0){Url = this.unter ++;}else{Url = this.unter --;}},getClasses: function (){return {btn01: this.isBtn01, btn02: this.isBtn02}}}
使用:class="getClasses()“的运行效果和使用:class=”{btn01: isBtn01, btn02: isBtn02}"的运行效果是一样的
index.html
<div class="myGoddess"><!--格式：v-bind:style{css属性名A: css属性值A, css属性名B: css属性值B, ...}（格式二）:style{css属性名A: css属性值A, css属性名B: css属性值B, ...其中属性值可以是vue内部data的变量，也可以直接是属性值--><h2 :style={color:myColor,border:myBorder}>斋藤飞鸟</h2></div><script src="../js/vue.js"></script><script src="../js/demo.js"></script>
demo.js
const myGoddess = new Vue({el: '.myGoddess',data: {myColor: '#80b5ea',myBorder: '2px solid yellow'}
})
运行结果：
—————————————————————————— —
上一篇
阿菜的Vue学习之旅（三）
下一篇
阿菜的Vue学习之旅（五）
本文发布于:2024-02-02 02:44:34，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170681530540890.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
