Vue项目,用模板语法{{}}插值渲染文本,文本不能换行的坑

<p>{{contentTitle}}</p>

data() {

  return {

    contentTitle: `第一行

    第二行`,

  }

},

contentTitle这个变量赋的值是,ES6的字符模板

根据说明,在这个字符模板内换行,会直接输出换行,不需要添加什么\n,<br>这类东西。

但渲染出来的文本根本没有换行,是这样的:

第一行 第二行

(换行符显示为一个空格)

之后查了一下资料说是要用,v-html进行数据的渲染

<p v-html="contentTitle"></p>

但事实是,依然无效

最后看了这个博文

https://www.cnblogs.com/leegent/p/9274424.html

使用了CCS的属性:white-space

将p容器的white-space属性设置为pre-wrap即可解决问题。

查看了一下这个属性发现是:规定段落中的文本换行

那么之前换行变为空格,这时设置为pre就没问题了

(pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。)

原文地址:https://www.cnblogs.com/yinblog/p/10637294.html

时间: 2024-09-30 12:56:20

Vue项目,用模板语法{{}}插值渲染文本,文本不能换行的坑的相关文章

flask模板的基本用法、模板语法、渲染模板、模板辅助工具

flask模板 在动态web程序中,视图函数返回的HTML数据往往需要根据相应的变量(比如查询参数)动态生成. 当HTML代码保存到单独的文件中时,我们没法再使用字符串格式化或拼接字符串的当时在HTML代码中插入变量,这时我们需要使用模板引擎(template engine).借助模板引擎,我们可以再HTML文件中使用特殊的语法来标记变量,这类包含固定内容和动态部分的可重用文件称为模板(template). 模板引擎的作用就是读取并执行模板中的特殊语法标记,并根据传入的数据将变量替换为实际值,输

vue项目中快捷语法糖

1.Vue.js是渐进式框架,采用自底向上增量开发的设计基于MVVM思想. 2.Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. 3.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 4.指令带有前缀 v-,以表示它们是 Vue.js 提供的特殊属性. 5.站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击. 6.请只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值. 7.当一个 ViewM

Vue项目中ESlint语法报错问题的处理方法

首先在项目根目录创建一个名叫.prettierrc的格式化配置项文件,文件内的格式为json格式. semi: falae 为true 格式化在行尾加分号,false不加分号 singleQuote: true 为true表示格式化以单引号为主 { "semi": false, "singleQuote": true } 禁用某项eslint规则: 在项目目录打开 .eslintrc.js 文件 在rules对象添加报错的属性,并设置为0,表示禁用该项. 一般在报错

第5节模板语法-插值

1.   v-once指令  效果图:       v-once指令 阻止显示新的变量值,就是 一部手机的价格 变了, 但是官网上显示的销售价格还是旧价格, 新价格它显示不出来. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link type="text/c

vue项目中做点击按钮复制文本框内容

zeroclipboard是走的flash插件,手机浏览器是不支持的,所以不得不舍弃之,用clipboard,clipboard不需要flash就可以完成复制剪切等功能,而且可以兼容pc,移动端 首先要安装:cnpm install clipboard --save 然后引入包 引入:import Clipboard from 'clipboard'; 这个人地方坑会报各种依赖丢失的错,没关系,用下面的方法可以拯救 项目: . 代码: <span class="NetbarNumber&q

Vue详细介绍模板语法和过滤器的使用!

表达式 {{ XXX }}使用过滤器 {{ XXX | yyy}}使用多个过滤器 {{ XXX | yyy | yyy1}}过滤器带参数 {{ XXX | yyy(123,"zhuiszhu") }} 动态属性: <img v-bind:src="xxx" /> 或 <img :src="xxx" /> 绑定事件 <a v-on:click="xxx" /> 或 <a v-on:cli

vue.js 学习之模板语法详解

本文和大家分享的主要是vue.js 的模板语法,希望对大家学习vue.js有所帮助,一起来看看吧. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析. 在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 如果你熟悉虚拟 D

django之模板语法

1. 变量 Django 模板中遍历复杂数据结构的关键是句点字符 句点符 views.py def index(request): ''' 模板语法: 渲染变量 -> {{}} 1. 深度查询,用的句点符 2. 过滤器 渲染标签 -> {% %} :param request: :return: ''' name = 'edward' i = 10 l = [111, 222, 333] info = {'name': 'yuan', 'age': 22} b = True class Per

Vue模板语法(一)

Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合. 另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架——它只聚焦于视图层. 因此它非常容易学习,非常容易与其它库或已