关于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条件循环判断+计算属性+绑定样式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中通过属性绑定为元素绑定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如何动态绑定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 如何绑定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动态属性数据绑定(v-bind指令)
v-bind的基本用法 一.本节说明 前面的章节我们学习了如何向页面html标签进行插值操作,那么如果我们想动态改变html标签的属性,该怎么办呢? 这就是我们这节开始要讲的内容v-bind. 二. 怎么做 ":"为v-bind的简写形式,也可称为语法糖 三. 效果 四. 深入 在上图中将a标签的href属性值设置为toutiao,VUE实例将自动去data里面寻找toutiao属性进行值绑定. 不只是a标签,所有的html标签属性都可以通过v-bind进行值绑定,然后通过改变数据动态
-
关于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
随机推荐
- Angular 中 select指令用法详解
- JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
- cmd dir结构树显示代码(列出目录文件)
- java连接mysql数据库乱码的解决方法
- 在ASP.NET 2.0中操作数据之七十四:用Managed Code创建存储过程和用户自定义函数(下部分)
- Android 多线程处理之多线程详解
- php foreach 使用&(与运算符)引用赋值要注意的问题
- Node.js调试技术总结分享
- js中window.open打开一个新的页面
- JAXB命名空间及前缀_动力节点Java学院整理
- CentOS7.0下安装FTP服务的方法
- jQuery实现大图轮播
- Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
- C#中调用SAPI实现语音识别的2种方法
- c#中(int)、int.Parse()、int.TryParse、Convert.ToInt32的区别详解
- C#接口归纳总结实例详解
- C++使用递归函数和栈操作逆序一个栈的算法示例
- Android中Matrix用法实例分析
- 浅谈python数据类型及类型转换
- Spring Boot JPA如何把ORM统一起来