Vue.js -- 双向过滤器去除html标签

<div id="box">
    <input type="text" v-model="msg | filterHtml">
    <br>
    <label v-html="msg"></label>
</div>

js:

new Vue({
    el:‘#box‘,
    data:{
        msg:‘<strong>这是段文字!</strong>‘//定义一段文字
   }
});

Vue.filter(‘filterHtml‘,{
    read:function(val){//val就是以获取的msg的值
        return val.replace(/<[^>]*>/g);//去除文字的<...></...>标签
    },
    write:function(){
        return val;
    }
});

原文地址:https://www.cnblogs.com/xinchenhui/p/8607522.html

时间: 2024-10-08 01:25:11

Vue.js -- 双向过滤器去除html标签的相关文章

Vue.js 自定义过滤器

过滤器,本质上就是一个函数.其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果. Vue.js 与 AngularJS 中的过滤器语法有些相似,使用管道符(|)进行连接,代码示例如下: {{'abc' | uppercase}}    'abc' => 'ABC' 这里使用了Vue.js 内置的过滤器 uppercase,将字符串中的字母全部转换成大写形式. Vue.js 支持在任何出现表达式的地方添加过滤器,除了上面例子中的 双大括号 表达式之外,还可以在绑定指令的表达式后调用,代码

Vue.js双向绑定的实现原理

Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 参考文章:https://segmentfault.com/a/1190000006599500 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = {

Vue.js双向绑定原理

Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 2.实例用法 2.1-1浅度监听:当点击页面,弹出发生变化了,a的值变为1,b的值变为101 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Vue.js双向数据绑定模板渲染

准备知识 1. 前端开发基础 html.css.js2. 前端模块化基础3. 对ES6有初步的了解 vuejs官网:cn.vuejs.org HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Vuejs</title> <style> .finished { text-deco

一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

↓— Vue.js框架魅力 —↓ 前言   Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.Vue 只关注视图层并且采用自底向上增量开发的设计. Vue.js作为一个后起的前端框架,借鉴了Angular .React等现代前端框架/库的诸多特点,取得了相当不错的成绩.Vue.js 自身不是一个全能框架——它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支

Vue.js快速入门

Vue.js简介 了解Vue.js Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,它不仅易于上手,还便于与第三方库或既有项目整合. Vue.js安装 下载Vue.js:https://github.com/vuejs/vue (我们现在使用的版本是2.5.16) 快速入门 声明式渲染 我们现在做个最简单的小例子,演示如何使用Vue.js实现声明式渲染. 创建Vue_1.htm

引入vue.js 文件

引入vue.js 文件:https://blog.csdn.net/weixin_41796631/article/details/82790970 一.引入vue.js 文件 1. 用脚本标签<script> 引入外部vue.js 文件<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2. 下面在一个新的 <script><script>

vue.js基础知识篇(4):过滤器、class与style的绑定2

代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做字符串处理,不带引号的参数被当做数据属性名处理. {{message | filterFunction "arg1" arg2 }} vue.js支持在任何出现表达式的地方添加过滤器. vue.js支持链式调用,上一个过滤器的输出结果作为下一个过滤器的输入.类似于Linux shell的管