TypeScript与Vue组合开发记录点（五）

最新推荐文章于 2023-07-14 18:09:06 发布

疯子的梦想＠

最新推荐文章于 2023-07-14 18:09:06 发布

阅读量436

点赞数 1

分类专栏：前端文章标签： vue.js typescript javascript

本文链接：https://blog.csdn.net/weixin_48681463/article/details/124795840

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

TypeScript与Vue组合开发记录点（五）

ElementUI之this.$alert()
HTML的i 标签
v-html
锚点
Array.shift()
Array.unshift()

ElementUI之this.$alert()

ElementUI的this.$alert()弹窗，在MessageBox 弹框中使用，修改该弹窗的默认样式。当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。调用$alert方法即可打开消息提示，它模拟了系统的alert ，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，message和title。

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
  export default {
    methods: {
      open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    }
  }
</script>

HTML的i 标签

标签包围的文本将用斜体显示。 标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。在没有其他元素可以使用时，比如, <cite>, <dfn>, , <q>, ,  ，请使用  标签。

v-html

v-html能够解析html结构，例如解析一个<a href>连接。

<p v-html="<a href="#">哈哈</a>"></p>

锚点

锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。在vue通过给相应的div元素绑定一个id，然后使用document.getElementById()获取到该id的字符串值，在拼接一个scrollintoView（）。在老技术中还可以使用a标签进行跳转。

// div盒子绑定一个id
<div id="my">定位到我这</div>
// 默认滚动到元素的顶部
document.getElementById("my").scrollIntoView();

 <body>
 	// 使用a标签点击跳转，就会定位到name为text的部分
    <a href="#text">跳转</a>
    <p>如果某个元素含有id/name属性，那么这个元素就是网页的一个锚点,利用a标签的href属性就能跳转到该锚点</p>
    <a href="#" name="text">北京网络职业学院</a>
</body>

注意：动态给id赋值，比如在该div中有index参数是动态时，为保证id值的唯一性。

//动态给id赋值 ,该id值就会随index的变化而变化，title-0、title-1等
:id=" 'title-' + index "

Array.shift()

Arr.shift()去除原数组头部的一个数，并返回第一个元素的值。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 运行后的返回值为第一个元素，Banana
fruits.shift()
// fruits数组结果输出为 Orange,Apple,Mango

Array.unshift()

Array.unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

// 将新项添加到数组起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 运行后的返回值为新数组的长度
fruits.unshift("Lemon","Pineapple");
// fruits 将输出：
// Lemon,Pineapple,Banana,Orange,Apple,Mango

疯子的梦想＠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TypeScript与Vue组合开发记录点（五）

TypeScript与Vue组合开发记录点（五）ElementUI之this.$alert()HTML的i 标签v-html锚点Array.shift()Array.unshift()ElementUI之this.$alert()ElementUI的this.$alert()弹窗，在MessageBox 弹框中使用，修改该弹窗的默认样式。当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。调用$alert方法即可打开消息提示，它模拟了系统的alert ，无法通过按下 ESC 或点
复制链接

扫一扫

专栏目录