首頁 web前端 Vue.js vue.js中怎麼換行

vue.js中怎麼換行

Nov 10, 2020 pm 04:44 PM
vue.js 換行

vue.js中換行的方法:使用【v-html】來顯示,程式碼為【

data(){return}requestText :""}】。

vue.js中怎麼換行

本教學操作環境:windows10系統、vue2.9,本文適用於所有品牌的電腦。

【相關文章推薦:vue.js

#vue.js中換行的方法:

在頁面中經常會遇到自訂文本,如果文本過長就需要換行,在HTML中可以透過

#標籤換行,也可以透過\n轉椅字元換行,以下是在javascript中和vue中的換行

javascript中的換行

var reg=new RegExp("\n","g"),
str= res.data.replace(reg,"<br>");
$(&#39;.class&#39;).html(str);
登入後複製

在vue中的換行

在vue中以上的換行是不起作用的,因為在vue中{{}}顯示的是變量,

會被當成字​​串顯示出來, \n當空格顯示。所以{{}}裡面的內容都會當成普通的字串處理,如果想顯示換行可以使用v-html來顯示。

<p class="text" v-html="requestText"></p>
* 以下requestText是变量*
data(){
    return{
    requestText:""
    }
}
**一下是从服务器获取的动态数据**
 let reg=new RegExp("\n","g"); 
 let str= result.data.replace(reg,"<br>");
 this.requestText=str;
登入後複製

相關免費學習推薦:JavaScript(影片)

以上是vue.js中怎麼換行的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1324
25
PHP教程
1272
29
C# 教程
1251
24
深入探討vite是怎麼解析.env檔的 深入探討vite是怎麼解析.env檔的 Jan 24, 2023 am 05:30 AM

使用vue框架開發前端專案時,我們部署的時候都會部署多套環境,往往開發、測試以及線上環境呼叫的介面網域都是不一樣的。如何能做到區分呢?那就是使用環境變數和模式。

圖文詳解如何在Vue專案中整合Ace程式碼編輯器 圖文詳解如何在Vue專案中整合Ace程式碼編輯器 Apr 24, 2023 am 10:52 AM

Ace 是一個用 JavaScript 寫的可嵌入程式碼編輯器。它與 Sublime、Vim 和 TextMate 等原生編輯器的功能和效能相符。它可以很容易地嵌入到任何網頁和 JavaScript 應用程式中。 Ace 被維護為Cloud9 IDE的主要編輯器 ,並且是 Mozilla Skywriter (Bespin) 專案的繼承者。

探討如何在Vue3中撰寫單元測試 探討如何在Vue3中撰寫單元測試 Apr 25, 2023 pm 07:41 PM

在當今前端開發中,Vue.js 已經成為了一個非常流行的框架。隨著 Vue.js 的不斷發展,單元測試變得越來越重要。今天,我們將探討如何在 Vue.js 3 中編寫單元測試,並提供一些最佳實踐和常見的問題及解決方案。

聊聊vue3怎麼使用高德地圖api 聊聊vue3怎麼使用高德地圖api Mar 09, 2023 pm 07:22 PM

在我們使用高德地圖的時候,官方給我們推薦了很多案例,demo,但是這些案例都是使用原生方法接入,並沒有提供vue或者react 的demo,vue2的接入網上也很多人都有寫過,以下這篇文章就來看看vue3怎麼使用常用的高德地圖api,希望對大家有幫助!

Vue中JSX語法和模板語法的簡單比較(優劣勢分析) Vue中JSX語法和模板語法的簡單比較(優劣勢分析) Mar 23, 2023 pm 07:53 PM

在Vue.js中,開發人員可以使用兩種不同的語法來建立使用者介面:JSX語法和範本語法。這兩種文法各有優劣,以下就來探討它們的差異和優劣勢。

淺析vue怎麼實現檔案切片上傳 淺析vue怎麼實現檔案切片上傳 Mar 24, 2023 pm 07:40 PM

在實際開發專案過程中有時候需要上傳比較大的文件,然後呢,上傳的時候相對來說就會慢一些,so,後台可能會要求前端進行文件切片上傳,很簡單哈,就是把比如說1個G的檔案流切割成若干個小的檔案流,然後分別請求介面傳遞這個小的檔案流。

BarTender中如何換行-BarTender中換行的方法 BarTender中如何換行-BarTender中換行的方法 Mar 05, 2024 pm 07:52 PM

許多用戶在辦公室都會使用BarTender軟體,最近一些新用戶詢問BarTender中如何換行?下文小編就為各位帶來了BarTender中換行的方法,讓我們一同來下文看看吧。 1、在BarTender中,點選工具列中的建立文字按鈕,選擇建立單行文本,輸入文字內容。 2.雙擊創建的文字對象,開啟文字屬性對話框。切換至「文字格式」選項卡,將右側的「類型」勾選為「段落」。 3、點選關閉,調整文字方塊大小或輸入更多文字,或依實際要求換行都可以。

解析Vue2實作composition API的原理 解析Vue2實作composition API的原理 Jan 13, 2023 am 08:30 AM

自從Vue3 發布之後,composition API 這個詞走入寫Vue 同學的視野之中,相信大家也一直聽到composition API 比之前的options API 有多好多強,如今由於@vue/composition-api 插件的發布,Vue2的同學也可以上車咯,接下來我們主要以響應式的ref 和reactive 來深入分析一下,這個插件是怎麼實現此

See all articles