vue项目中遇到的问题：之解决token失效的方法

最新推荐文章于 2024-06-10 16:44:05 发布

IT博客技术分享

最新推荐文章于 2024-06-10 16:44:05 发布

阅读量1.8w

点赞数 1

分类专栏： VUE相关问题汇总

本文链接：https://blog.csdn.net/qq_41646249/article/details/83184832

版权

VUE相关问题汇总专栏收录该内容

53 篇文章 4 订阅

订阅专栏

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标签超链接的写法：

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

IT博客技术分享

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue项目中遇到的问题：之解决token失效的方法

1.解决token失效的方法常见问题2：2.字体多行显示不了的解决办法：{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}3.tab栏的图像自动识别，登录状态，未登录是灰色的图标，登陆后是红色图标4. 点击按钮：“展示” 与 “收起” 的功能html：...
复制链接

扫一扫