this.$alert中使用html不生效
时间: 2023-11-17 07:08:17 浏览: 41
这个问题可能是因为在使用 `this.$alert` 方法时,没有正确地设置 `type` 属性。默认情况下,`this.$alert` 的 `type` 属性是 `'info'`,这意味着它会对传入的内容进行转义,从而防止 XSS 攻击。
如果你想要在 `this.$alert` 中使用 HTML,你需要将 `type` 属性设置为 `'danger'` 或者 `'warning'`,这样就可以显示传入的 HTML 内容了。
例如,下面的代码会在弹出框中显示 `<strong>Hello World</strong>`,而不是转义后的文本:
```javascript
this.$alert('<strong>Hello World</strong>', {
type: 'danger'
});
```
希望这个回答能够帮到你!
相关问题
怎么在外部js文件中使用this.$alert
在外部js文件中使用this.$alert需要先引入Vue.js,因为`this`关键字只能在Vue实例中使用,而`$alert`是Vue实例的一个方法。可以按照以下步骤进行:
1. 在HTML文件中引入Vue.js:
```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```
2. 在HTML文件中引入外部js文件:
```html
<script src="path/to/your/external.js"></script>
```
3. 在外部js文件中使用Vue.js:
```javascript
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
showAlert: function() {
this.$alert('This is an alert message.');
}
}
})
```
在上面的代码中,我们定义了一个Vue实例,并在其中定义了一个`showAlert`方法,该方法调用了`this.$alert`方法。在HTML文件中,我们需要有一个id为`app`的元素来挂载Vue实例。
这样,在外部js文件中就可以使用`this.$alert`方法了。当然,前提是你的Vue实例已经正确地初始化并且`this`指向了该实例。
this.$alert
this.$alert是一个Vue.js框架中的方法,用于显示一个警告框。在引用[1]中的代码示例中,当点击确定按钮时,会触发一个回调函数,回调函数中使用了this.$router.go(0)来刷新当前页面。而在引用中的代码示例中,当点击确定按钮时,会触发一个回调函数,回调函数中使用了window.location.href来跳转到指定的页面。引用中的代码示例中,当登录成功后,会执行一个alert函数,显示错误信息。所以,this.$alert是用于显示警告框,并在确定按钮点击时执行相应的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [【vue】this.$alert、this.$confirm的简单使用](https://blog.csdn.net/ChaoChao66666/article/details/131206870)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [踩坑分享( 8 )- Vue使用this.$alert()报错:Uncaught (in promise) TypeError: this.$alert is not a ...](https://blog.csdn.net/qq_61672548/article/details/125021697)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [解决vue.js this.$router.push无效的问题](https://download.csdn.net/download/weixin_38702339/13588275)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]