vue通过v-html指令渲染的富文本无法修改样式的解决方案_vue.js

来源:脚本之家  责任编辑:小易  

有时候指令太多会造成记错、记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错。v-if//v-show//v-else//v-for//v-bind//v-on1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素;eg: HTML: <div id="example01"><p v-if="male">Male</p><p v-if="female">Female</p><p v-if="age>25">Age:{{age}}</p><p v-if="name.indexOf('lin')>0">Name:{{name}}</p></div>JS:var vm= new Vue({el:"#example01",data:{male:true,female: false,age:29,name:'colin'}})v-show 与v-if类似,只是会渲e799bee5baa6e79fa5e98193e59b9ee7ad9431333365633933染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none";v-else 必须跟在v-if/v-show指令之后,不然不起作用;如果v-if/v-show指令的表达式为true,则else元素不显示;如果v-if/v-show指令的表达式为false,则else元素显示在页面上;eg: <div id="app"><h1 v-if="age >= 25">Age: {{ age }}</h1><h1 v-else>Name: {{ name }}</h1><hr><h1 v-show="name.indexOf('cool') = 0">Name: {{ name }}</h1><h1 v-else>Sex: {{ sex }}</h1></div><script> var vm = new Vue({el: '#app',data: {age: 21,name: 'keepcool',sex: 'Male'}})</script>,数据渲染:v-text、v-html、{{}}条件渲染 控制模板隐藏:v-show 、v-if、v-elsev-for 渲染循环列表v-on绑定事件v-bind 绑定属性本回答被网友采纳www.zgxue.com防采集请勿采集本网。

1.问题描述

在 Vue.js,使用 v-if 指令判断元素显示 Yes在 中配合 v-if 条件渲染一整组 因为 v-if 是一个指令,需要将它添加到一个元素上。但是如果想切换多个元素,此时可以把一个 元素当做包装元素,并在

在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式。

Vue.js列表渲染绑定jQuery插件的正确姿势 使用v-for绑定列表时,有时候需要绑定如select2之类的jQuery插件。需要在Vue根据数组内容生成dom元素之后,去找到该dom元素,然后$().xxx绑定jQuery插件。之前

代码如下,div.article-context里面的图片修改成自适应,但是没有任何效果。

直接上代码比如 v-for=\"i in custom\"> 上面是循环一个数组然后生成li,但是我想 实现 如果 index是0 就给 li 加个 class,大于0 就不加class怎么做?比如 v-for=\"i in custom\"v-if=\"{{$index

<div class="article-context" v-html="post.content"></div><style scoped>.article-context img { width: auto; height: auto; max-width: 100%; max-height: 100%;}</style>

/html 代码 v-model=\"message\"placeholder=\"edit me\"> Message is:{{ message }}</p>/vue代码 var vm=new Vue({ el:\"#app\", data:{ message:'绑定多行文本' } })这样 你就完成v-model的

2.分析原因

使用vue中的v-html指令,否则会因防止xss攻击不渲染html标签 解决方法如下: 1、双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令: Using

这是为什么呢?原因很简单:如果图片(img标签)在template中先写出来,那么在<style>标签中是可以修改其样式的。

我猜,这应该是vue编译的规范吧,未在虚拟dom中渲染的元素无法修改样式。

3.解决方案

解决方案1(推荐):在updated生命周期函数中,js动态设置样式,代码如下:

<script>import $ from 'jquery'export default {updated() { $('.article-context').find('img').css({ "width": "auto", "height": "auto", 'max-width': '100%', 'max-height': '100%' });}</script>

解决方案2(不推荐):去掉style标签中的scoped属性;至于原因?没有仔细研究,我在使用过程出现富文本编辑器无法初始化的问题。

<style>.article-context img { width: auto; height: auto; max-width: 100%; max-height: 100%;}</style>

到此这篇关于vue通过v-html指令渲染的富文本无法修改样式的解决方案的文章就介绍到这了,更多相关vue v-html富文本无法修改内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

vue的v-once指令具体实现例子如下:DOCTYPEhtml>title>script>fgffd{{msg}}对对对{{msg}}new Vue({el:'#app',data:{msg:'今天的天气很好'}})与vue的v-once指令相类似的还有v-model指令,后者能够实现双向数据绑定这个指令只能用在,,这些表单元素上,所谓双向数据绑定,指的就是在JS实例中的data与其渲染的dom元素上的内容保持一致,二者任何一个被改变,另一个也会相应的更新为相同的内容,这是通过属性访问器实现的。具体实现例子如下:p>`message`</p><input type="text"v-model="message">var vm4=new Vue({ el:'#test04',data:{ message:'双向数据绑定' }});内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 在vue中利用v-html按分号将文本换行的例子
  • vue实现在v-html的html字符串中绑定事件
  • vue解决 v-html不能触发点击事件的问题
  • vue指令v-html使用过滤器filters功能实例
  • vue指令之 v-cloak、v-text、v-html实例详解
  • vue中v-text / v-html使用实例代码详解
  • vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
  • 详解三种方式解决vue中v-html元素中标签样式
  • vue.js使用v-pre与v-html输出html操作示例
  • vue 插值 v-once,v-text, v-html详解
  • vue项目页面跳转时浏览器窗口上方显示进度条功能
  • vuejs点击class变化的实例
  • vue.js下拉菜单组件使用方法详解
  • 从零到一详聊创建vue工程及遇到的常见问题
  • 35个最好用的vue开源库(史上最全)
  • 讲解vue-router之什么是动态路由
  • vuex之理解mutations的用法实例
  • 解决vue脚手架项目打包后路由视图不显示的问题
  • vue+elementui实现多图片上传与回显功能(含回显后继续上传或删除
  • vue 3.x+axios跨域方案的踩坑指南
  • vue的v-once指令怎么用?
  • Vue.js中常用指令有哪些
  • Vue.js中v-bind的使用问题
  • 如何利用Vue.js库中的v-if内部指令判断元素显示
  • 如何利用Vue.js库中的v-if内部指令判断元素显示
  • vue 怎么在列表渲染后绑定 jquery 插件
  • vue.js的v-if判断数组多少个
  • 如何利用Vue.js库中的v-model绑定表单中的数据
  • 急急急 tp5.1输出原html标签?
  • vue问题,。。
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库在vue中利用v-html按分号将文本换行的例子vue实现在v-html的html字符串中绑定事件vue解决 v-html不能触发点击事件的问题vue指令v-html使用过滤器filters功能实例vue指令之 v-cloak、v-text、v-html实例详解vue中v-text / v-html使用实例代码详解vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例详解三种方式解决vue中v-html元素中标签样式vue.js使用v-pre与v-html输出html操作示例vue 插值 v-once,v-text, v-html详解vue项目页面跳转时浏览器窗口上方显示进度条功能vuejs点击class变化的实例vue.js下拉菜单组件使用方法详解从零到一详聊创建vue工程及遇到的常见问题35个最好用的vue开源库(史上最全)讲解vue-router之什么是动态路由vuex之理解mutations的用法实例解决vue脚手架项目打包后路由视图不显示的问题vue+elementui实现多图片上传与回显功能(含回显后继续上传或删除vue 3.x+axios跨域方案的踩坑指南vue引用js文件的多种方式(推荐)简单理解vue中props属性vue之父子组件间通信实例讲解(prvue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue.js中的图片引用路径的方式vue服务器渲染nuxt学习笔记使用vue-router完成简单导航功能【推荐】vue-cli创建的项目中的githooks原理解析mpvue中配置vuex并持久化到本地storage图vue插槽slot的简单理解与用法实例分析vue轮播图插件vue-awesome-swiper的使用代mpvue小程序仿qq左滑置顶删除组件浅谈vue自定义全局组件并通过全局方法 vu解决微信浏览器缓存站点入口文件(iis部署vue.js指令v-for使用及索引获取
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved