解决vue字符串换行问题(绝对管用)

vue 中 用 {{}} 进行数据绑定的时候，如果我么你想让字符串换行是不生效的

解决办法，不用上边的方式进行数据绑定，用v-html标签代替{{}}

data中的str为 "<b>1111</b><br/>2222"

例1，

<div>{{str}}<div>

例1效果

<i>1111</i><br/>2222

例2，

<div v-html="str"><div>

例2效果

1111

2222

补充知识：vue的this.$router.push()方法跳转路由带参数

这个方法需要注意一点，path和params不能同时使用使用了path，params就失效了

解决方法 加入 路由a 跳转到 路由b

路由a

    this.$router.push({
      name:"Show",
      params: {
       key:value
      }

    })

路由b

this.$route.params中就有a传的参数了

以上这篇解决vue字符串换行问题(绝对管用)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 对vue 键盘回车事件的实例讲解

    如果是原生的input,使用 @keyup.enter就可以,若是使用了element-ui,则要加上native限制符,因为element-ui把input进行了封装,原事件就不起作用了,代码如下: <input v-model="form.name" placeholder="昵称" @keyup.enter="submit"> <el-input v-model="form.name" placehol

  • vue如何截取字符串

    在后端有许多的封装方法来截取字符串或者对字符串的操作,同样前端也有相应的方法. 有一个data数据为ipaddr data() { return { ipaddr: "192.168.100.110", }; }, 1.现在需要切割成一个数组,得到四个ip值,只需要通过计算属性就可以实现 computed:{ ipaddrArray:function(){ return this.ipaddr.split('.') } } 最终通过ul可以展现切割的字符串 <template&g

  • 在vue里使用codemirror遇到的问题

    前提小结: 第一次用codemirror,而且是在vue里面使用,看了官方文档,一大串都是英文,翻译后大概了解了这个插件,然后在项目中使用时出现过好几个问题: 1.新版的codemirror在lib目录下没有codemirror.js文件,旧版的有,所以网上的很多文章都是直接这样引: <scriptsrc="lib/codemirror.js"></script> <linkrel="stylesheet"href="../l

  • 解决vue字符串换行问题(绝对管用)

    vue 中 用 {{}} 进行数据绑定的时候,如果我么你想让字符串换行是不生效的 解决办法,不用上边的方式进行数据绑定,用v-html标签代替{{}} data中的str为 "<b>1111</b><br/>2222" 例1, <div>{{str}}<div> 例1效果 <i>1111</i><br/>2222 例2, <div v-html="str">&

  • 解决Vue大括号字符换行踩的坑

    解决Vue大括号字符换行踩的坑

    最近遇到这样一个问题,在页面上要显示一段自定义的文本,文本如果较长的话需要换行显示. 在HTML中可以通过<br/>标签换行,也可以通过\n转义字符换行 在Vue中用大括号显示的变量,加<br/>会直接被当成字符串显示出来,加\n显示一个空格,加\r\n显示两个空格,因为{{}}}是文本插值,内部都会按照普通字符串进行处理,可以用v-html进行显示 如下显示name变量 data() { return{ name: '前一部分<br/>后一部分' } } 在元素上显示

  • 解决Vue动态加载本地图片问题

    最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png',也就是没有经过编译的步骤,直接将获取到的数据当作字符串显示. 解决方法: 1.在当前界面全局import图片地址 //使用import引入 import img1 from './img/img1.png' import img2 from './img/img2.png' export defa

  • 解决vue router组件状态刷新消失的问题

    场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})跳转到主页,并在主页显示数据.但是当刷新页面时,由于并不是通过登录接口进入主页,router中没有'params: res.data'信息,主页无法获取到登录信息. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页

  • 解决vue v-for src 图片路径问题 404

    我的代码结构如下所示不能执行,会出现报错 <RadioGroup v-model="animal"> <Radio v-for='a in radio_arr' label={{a}}></Radio> </RadioGroup> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息: 修改代码如下: 修改内容为 la

  • 解决vue js IOS H5focus无法自动弹出键盘的问题

    IOS不自动弹出键盘,必须手动触发一下focus才行,不能自动调用,所以需要诱导用户点击某个按钮触发focus,最终修改的方法,默认隐藏密码输入框,隐藏不能用v-if或者是v-show,用position:absolute, top:-1000,然后点击输入密码将top改为视窗内,并且调用focus的方法 代码如下,有问题欢迎评论 <template> <div class="pwdpush-box"> <h4 class="enter-pass

  • 解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题

    问题 在做银行卡输入框时有一个需求如题,这里举例用-隔断 调查 查看了很多大公司网站的银行卡输入,发现还有有很多缺陷的:  有的是在中间删除,光标会跳到最后:  有的是能删除掉中间隔断符的:  等等,逻辑感觉比较混乱,或者是我不懂他们的高深设计吧. 只有支付宝的设计感觉是比较合理的,改变了只有输入框的固有方案,放图: 上面出现的显示框不可修改,能清晰看出四位隔断的格式. 不过为了实现自己项目只有一个卡号输入框的需求,只能硬着头皮研究了. 解决 将下面的方法稍作修改绑在输入框的input方法上就o

  • 解决vue的 v-for 循环中图片加载路径问题

    先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数

  • 解决Vue axios post请求,后台获取不到数据的问题方法

    最近做项目,需要用到vue,后台是php,第一次使用axios进行请求,本以为同ajax一样,会很简单,但是结果往往不让人满意啊,get请求很简单,这里就不说了,主要说下 post请求方式. 使用axios进行post请求,后台居然接收不到数据,这就纳闷了,于是网上一顿搜索,现在将所用的解决办法给大家说下: 1.new URLSearchParams方式 起初使用params.append("属性名":属性值)的方式,对于简单的数据传递这样是没有问题的,后台可以正常接收数据,但我发现一

  • 解决Vue.js 2.0 有时双向绑定img src属性失败的问题

    错误用法: <img src="http:0.0.0.127/{{item.imgname}}" alt=""> 正确用法: <img src="'http:0.0.0.127/'+item.imgname" alt=""> 绑定属性的时候,前面加: 属性的值可以用表达式,但注意字符串拼接的时候要加引号 以上这篇解决Vue.js 2.0 有时双向绑定img src属性失败的问题就是小编分享给大家的全部内

随机推荐