1.解决token失效的方法
常见问题2:
2.字体多行显示不了的解决办法:
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
3. tab栏的图像自动识别,登录状态,未登录是灰色的图标,登陆后是红色图标
4. 点击按钮 :“展示” 与 “收起” 的功能
html:
<div>
<div @click="show" style="color:#A5A5A5;text-align: center;font-size: 14px;padding-bottom:4rem;">{{name}} ^</div>
<div v-if="!hide">
<!-- 关注我们 -->
<div class="us">
<h3>关注我们</h3>
<h5>Follow us</h5>
</div>
<!-- 扫码下载 -->
<div class="ERMA">
<!-- ios -->
<div class="left">
<ul>
<li><img src="../../../assets/ios/index/iphone.png" alt=""></li>
<li>扫一扫</li>
<li>iphone版下载</li>
</ul>
</div>
<!-- andriod -->
<div class="right">
<ul>
<li><img src="../../../assets/ios/index/Andriod.png" alt=""></li>
<li>扫一扫</li>
<li>Andriod</li>
</ul>
</div>
</div>
<!-- 联系信息 -->
<div class=" information">
<div class="title">
<h3>联系方式</h3>
<h5>Contact information</h5>
</div>
<div class="cont">
<p><img src="../../../assets/ios/index/company.png" alt=""> <span> 北京公司</span></p>
<div class="two">
<ul>
<li><img src="../../../assets/ios/index/website.png" alt=""> <span> www.x.com</span></li>
<li><img src="../../../assets/ios/index/tell.png" alt=""> <span> 010-872</span></li>
</ul>
</div>
<p><img src="../../../assets/ios/index/address.png" alt=""> <span> 北京市朝阳区</span></p>
</div>
</div>
</div>
</div>
css:
/* 关注我们 */
#aboutUs .us {
text-align: center;
margin-top: 5rem;
}
#aboutUs .us h3 {
font-size: 2.5rem;
font-family: PingFangSC-Medium;
font-weight: bold;
color: #2e2e2e;
}
#aboutUs .us h5 {
font-size: 1.5rem;
font-family: PingFangSC-Regular;
font-weight: 400;
color: #a4a4a4;
line-height: 2rem;
}
/* 扫码下载 */
#aboutUs .ERMA {
display: flex;
flex-direction: row;
padding: 2.5rem 0 5rem 0;
}
#aboutUs .ERMA .left,
#aboutUs .ERMA .right {
width: 50%;
text-align: center;
font-size: 1.4rem;
font-family: PingFangSC-Regular;
font-weight: 400;
color: #2e2e2e;
line-height: 2rem;
}
#aboutUs .ERMA li img {
width: 10rem;
height: 10rem;
}
/* 联系信息 */
#aboutUs .information {
width: 100%;
height: 23rem;
background: url("../../../assets/ios/aboutUs/information.png") no-repeat;
background-size: 100%;
color: #fff;
font-family: PingFangSC-Medium;
font-weight: 500;
}
#aboutUs .information .title {
padding: 4rem 0 3rem 0;
text-align: center;
}
#aboutUs .information .title h3 {
font-size: 2.2rem;
font-weight: 400;
}
#aboutUs .information .title h5 {
font-size: 1.3rem;
font-weight: 400;
}
#aboutUs .information .cont {
padding: 0 2rem 0 2rem;
font-size: 1.3rem;
font-family: PingFangSC-Medium;
font-weight: 500;
}
#aboutUs .information .cont img {
width: 2.5rem;
height: 2.5rem;
vertical-align: bottom;
}
#aboutUs .information .cont .two li {
width: 48%;
display: inline-block;
}
#aboutUs .information .cont .two li span {
display: inline-block;
}
js:
<script>
export default {
data() {
return {
name: "展开",
hide: true
};
},
methods: {
show() {
if (this.hide) {
this.name = "收起";
} else {
this.name = "展开";
}
this.hide = !this.hide;
}
}
};
</script>
5. a标签 超链接的写法:
<pre><a v-bind:href="url">菜鸟教程</a></pre>
data: {
url: 'http://www.runoob.com'
}
在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:
<a v-on:click="doSomething">
修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>
6.双向数据绑定
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
</body>
</html>
7. v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
最后为了方便大家的沟通与交流请加QQ群: 625787746
请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140