关于vue中标签的属性绑定值渲染问题
目录
- 标签的属性绑定值渲染问题
- 最终解决办法
- vue标签属性条件渲染
- 1、v-bind
- 2、v-if和v-show的区别
标签的属性绑定值渲染问题
在项目中遇到一个棘手的问题,给span标签添加title,title显示的内容就是该span标签显示的内容,且返回的内容中有html标签,需要解析出来(考虑vue的slot插槽未能实现)
最终解决办法
在绑定的title中使用过滤器,去掉内容中的标签(本项目情况特殊,返回标签固定,所以替换标签比较方便),如果大家还有其他解决办法欢迎留言~~
//template部分--使用的elementUI <span class="pointer" :title="scope.row[columns]['string'] | columnTitle" v-html="scope.row[columns]['string']" @click="showColumnDetail(scope.row)"> </span> //过滤器 filters: { columnTitle(content) { let recontent = content.replace(/ /g,' ') return recontent.replaceAll("<font color=red>", "").replaceAll("</font>", "") } },
vue标签属性条件渲染
1、v-bind
v-bind可以动态绑定
<a v-bind:herf="link">to baidu</a>
可以简写为:herf
data(){ return{ link:"www.baidu.com" }}
作用:如果link在其他地方被修改,a标签可以动态被修改,否则link只是一个字符串
ton v-on:click="additem" v-bind:class="className">additem</button>
写在data里,true就有a的样式,false则没有
className:{ 'a':false }, <button v-on:click="additem" v-bind:class="{'a':haserror}">additem</button> haserror:true, //true的时候有样式,false没有
数组和对象可以混用
:style="linkcss" linkcss{ 'color':'red' }
可以设定样式
2、v-if和v-show的区别
v-if会直接从文档流删除 v-show是控制css样式的display来控制
两者都可配合v-else使用
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue中通过属性绑定为元素绑定style行内样式的实例代码
1.直接在元素上通过:style的形式,书写样式对象 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 <h
-
一文读懂vue动态属性数据绑定(v-bind指令)
v-bind的基本用法 一.本节说明 前面的章节我们学习了如何向页面html标签进行插值操作,那么如果我们想动态改变html标签的属性,该怎么办呢? 这就是我们这节开始要讲的内容v-bind. 二. 怎么做 ":"为v-bind的简写形式,也可称为语法糖 三. 效果 四. 深入 在上图中将a标签的href属性值设置为toutiao,VUE实例将自动去data里面寻找toutiao属性进行值绑定. 不只是a标签,所有的html标签属性都可以通过v-bind进行值绑定,然后通过改变数据动态
-
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Vue.js条件与循环 1.条件判断 (1)v-if, <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> </template> </div> <script> new Vue({ el:'#app', data:{ seen:true,
-
vue 如何绑定disabled属性让其不能被点击
目录 vue绑定disabled属性让其不点击 vue disabled动态绑定事件 vue disabled的用法 vue绑定disabled属性让其不点击 vue disabled动态绑定事件 vue disabled的用法 <input type="text" :disabled="disabled"> data:{ disabled:false } 以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们.
-
vue动态绑定v-model属性名方式
目录 vue动态绑定v-model属性名 1.目标 2.方案 vue双向绑定原理(v-model) 表单绑定 组件使用v-model vue动态绑定v-model属性名 1.目标 首先配置列,根据配置渲染表单,每个表单项绑定配置中的属性 2.方案 <template v-for="(item) in showQueryColumns" > <el-col :key="item.prop" :xs = "24" :sm = &qu
-
vue如何动态绑定img的src属性(v-bind)
目录 动态绑定img的src属性(v-bind) 解决办法 vue添加img的src地址 v-bind 动态绑定img的src属性(v-bind) 今天遇到一个特别坑爹问题,页面中使用img动态绑定图片路径时总是不显示.(处理前的代码) <div class="prod-content"> <div class="prod-item" v-for="(item,index) in Merchant" :key="ind
-
关于vue中标签的属性绑定值渲染问题
目录 标签的属性绑定值渲染问题 最终解决办法 vue标签属性条件渲染 1.v-bind 2.v-if和v-show的区别 标签的属性绑定值渲染问题 在项目中遇到一个棘手的问题,给span标签添加title,title显示的内容就是该span标签显示的内容,且返回的内容中有html标签,需要解析出来(考虑vue的slot插槽未能实现) 最终解决办法 在绑定的title中使用过滤器,去掉内容中的标签(本项目情况特殊,返回标签固定,所以替换标签比较方便),如果大家还有其他解决办法欢迎留言~~ //te
-
vue计算属性+vue中class与style绑定(推荐)
vue计算属性 在模板中放入大量的逻辑会让模板过重且难以维护 计算属性下所有函数可以放到computed中 class与style绑定 原始写法 v-bind:class 缩写 :class class绑定的三种形式 style的三种绑定形式 属性值为true显示,false不显示 第一种绑定方式: 第二种绑定方式: 第三种绑定方式: style修改 方式1: 方式2: 方式三: ps:下面通过代码介绍下计算属性 计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部
-
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. 首先美化一下界面 - 相关的界面代码不粘贴,可从我的 github 分支中看到.下面最终的实现效果图: 改造下 data 中的 navs 属性 ( navs 数组每个元素都是 包含 active 和 data 属性的对象 ): created: function () { fetch('https://www.apiopen.top/journalismApi') .then(v => v.json()) .th
-
详解vue中this.$emit()的返回值是什么
vue中的三大属性:属性 .事件.插槽,---事件 在事件中有 普通事件:@click/@input/@change/@xxx...事件: 修饰符事件:@input.trim,@click.stop,@submit.prevent...一般用于原生html元素: 答:在vue中this.$emit(); 返回值是this; 代码示例: 在子组件中:Event.vue:接收通过父组件传递过来的props:{name:String} 属性: 在input 标签中: value=name; 绑定nam
-
Vue中router-link常用属性使用案例讲解
目录 Vue中router-link常用属性使用 router-link属性 vue中的router-link属性详解 router-link标签 router-link属性值详解 Vue中router-link常用属性使用 在vue1.0版本的超链接标签还是原来的a标签,链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签,但最终在页面还是会被渲染成a标签的至于为什么要把a换成router-link原因还是有的,比如我们之前一直惯用的nav导
-
Vue 2.0学习笔记之Vue中的computed属性
Vue中的 computed 属性称为 计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}
-
全面解析vue中的数据双向绑定
1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter.这也正是Vue不兼容IE8以下的原因. 2.Object.defineProerty(); var obj = {}; Object.defineProperty(obj,"hello",{ enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举); configurable
-
在vue中实现简单页面逆传值的方法
[需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中,页面跳转 A -> B -> C,到 C 页面后,内存中一直存储着 A 和 B 页面的数据和状态,通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等,另外还有代理,block传值等操作. vue是一个单页应用,轻量,并且不会重复下载数据.当它从一个页面跳转到另一个页面时,原来的页面的vue实例和
-
详解vue中v-model和v-bind绑定数据的异同
vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data
-
vue中的计算属性和侦听属性
计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性,只有依赖的那个值发生改变,他才会重新计算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo
随机推荐
- 淘宝网提供的国内RubyGems镜像简介和使用方法
- Win7彻底卸载Oracle 11g图文步骤(靠谱)
- Angular的自定义指令以及实例
- 微信小程序 swiper组件轮播图详解及实例
- ubuntu下linux常用指令小结
- Java发送带html标签内容的邮件实例代码
- XHTML-Strict 内允许出现的标签
- js unicode 编码解析关于数据转换为中文的两种方法
- Android入门之TabHost与TabWidget实例解析
- php基于环形链表解决约瑟夫环问题示例
- Android中3种图片压缩处理方法
- ruby判断一个数是否为质数(素数)示例
- Windows Powershell对象转换成文本
- 好玩的vbs特色代码vbs栈类
- linux挂载新硬盘过程分享
- 利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
- Java 字节数组类型(byte[])与int类型互转方法
- 不用SEO 网站取得成功的经验探讨
- .Net平台开发实践的一些点滴总结(技术规范与实践精华)第1/2页
- 张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习