vue指令v-html和v-text

目录
  • 1、v-text 文本渲染指令
  • 2、 v-html

1、v-text 文本渲染指令

（只能渲染文本不能渲染标签）

 

<div id="test">

        <p v-text="message"></p>

 </div>

 <script src="./js/vue.js"></script>

 <script>
    const vm = new Vue({

            el:"#test",

            data:{

                message:"<h2>hello vue</h2>"

            }

        })

 </script>

输出结果为：

2、 v-html

(可以渲染指令，可以渲染标签)

<div id="test">

        <p v-html="message"></p>

 </div>

 <script src="./js/vue.js"></script>

 <script>

    const vm = new Vue({

            el:"#test",

            data:{

                message:"<h2>hello vue</h2>"

            }

        }) 

 </script>

输出结果为：

到此这篇关于 vue指令v-html和v-text的文章就介绍到这了,更多相关v-html和v-text内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue学习笔记之指令v-text && v-html && v-bind详解

    vue学习笔记之指令v-text && v-html && v-bind详解

    一 : 指令的概念: 指令是vue自定义的以v-开头的自定义属性.每个不同的属性都有各自不同的意义和功能 二 : 指令的语法: v-指令名 = "表达式判断或者是业务模型中属性名或者事件名" 三 : 具体指令 1. v-text 作用 : 操作元素中的纯文本 快捷方式 : {{}} 栗子1 简写形式:将v-text=""换成{{}} <div id="app"> {{ message }} </div> var app =

  • vue中{{}},v-text和v-html区别与应用详解

    vue中{{}},v-text和v-html区别与应用详解

    {{}}获取值,不会清空标签原有内容 v-text 获取值,会清空标签原有内容,输出的是纯文本 v-html 获取值,会清空标签原有内容,若数据中包含html标签,将其当html标签解析后输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <

  • vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

    vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

    本文实例讲述了vue防止花括号{{}}闪烁v-text和v-html.v-cloak用法.分享给大家供大家参考,具体如下: 一.v-text和v-html <span>{{msg}}</span>  -->     v-text {{{msg}}}      -->    v-html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

  • Vue指令之 v-cloak、v-text、v-html实例详解

    v-cloak 当用户频繁刷新页面或网速慢时,页面未完成 Vue.js 的加载时,导致 Vue 来不及渲染,这就会导致在浏览器中直接暴露插值(表达式),Vue由此也给出了解决方法. 在指定标签或整个父容器加入v-cloak指令,通过css选择器选中v-cloak,隐藏元素即可. // html <div v-cloak id="app"> <span>{{ msg }}</span> </div> // css [v-cloak]{ di

  • vue中v-text / v-html使用实例代码详解

    废话少说,代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例中的数据,事件和方法</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><

  • Vue3中的模板语法和vue指令

    目录 1 模板插值语法 2 指令 1 模板插值语法 在script 声明一个变量可以直接在template 使用用法为{{变量名称}} 模板语法是可以编写条件运算的 运算也是支持的 操作API 也是支持的 <template> {{ message }} {{ message2==0 ? '我是老大' : '我笑的' }} {{ message2 + 1 }} {{ message.split('').map(v => `4546$v`) }} </template> <

  • Hbuilder配置Avalon和Vue指令提示的方法详解

    Hbuilder配置Avalon和Vue指令提示的方法详解

    前言 本人是一名JAVA后端开发,偶尔也会研究一下前端内容,因为Hbuilder是基于eclipse开发的,所以用起来倍感亲切啊,而且在我尝试使用的几款前端开发工具中,Hbuilder的表现也是相当出色地,可以访问Huilder官网下载体验一下. 言归正传,当前前端的开发中,MVVM框架非常流行,比较典型的如:AngularJS.VueJS等,这部分框架基本都有一个指令的概念,在工具中配置相关的提示,可以极大地方便的我们的开发,下面就来介绍一下如何在Hbuilder中进行配置,话不多说了,来一起

  • 简单学习vue指令directive

    本文为大家分享了vue指令directive的使用方法,供大家参考,具体内容如下 1.指令的注册 指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册: Vue.directive('dirName',function(){ //定义指令 }); 另外一种是局部注册: new Vue({ directives:{ dirName:{ //定义指令 } } }); 2.指令的定义 指令定义,官方提供了五个钩子函数来供我们使用,分别代表了一个组件的各个生命周期 bind: 只调用一次,指令

  • vue指令以及dom操作详解

    "AngularJS 通过被称为 指令 的新属性来扩展 HTML.AngularJS 通过内置的指令来为应用添加功能.AngularJS 允许你自定义指令." 这是我最初接触"指令"这个词.还记得那时候,ng大行其道的时候,我特别好奇怎么给一个div加一个"ng-app" 就能解决这么多问题. 后来随着前端工作的深入,我用了jq的data-attr并且学会了jq的插件使用.但,这这并不能让我把它"指令"联想到一块,后来插件需要

  • vue指令之表单控件绑定v-model v-model与v-bind结合使用

    一.表单控件绑定v-model v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. ① 单行文本框 input[type="text"] .多行文本框 textarea: v-model值绑定到value属性: <body> <div id="app"> <input type="text" v-model=&quo

  • vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

    在网页的表单中,经常需要用程序来控制input和textarea的自动聚焦行为.例如我最近做的一个项目,有个装箱出库的流程,input框自动聚焦的流程如下:页面进入时自动聚焦到订单号输入框->订单号扫描完毕聚焦到商品条码输入框->扫描完一个商品条码后依然停留在条码输入框->所有条码扫描完毕聚焦到订单号输入框. 为了应付这种需求,就做了这个指令,github地址: vue-auto-focus ,欢迎star. example <template> <form v-aut

  • vue 指令和过滤器的基本使用(品牌管理案例)

    过滤器的基本使用 定义一个过滤器 <div id="app"> <p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p> </div> // 定义一个 Vue 全局的过滤器,名字叫做 msgFormat Vue.filter('msgFormat', function (msg, arg, arg2) { // 字符串的 replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个

  • Vue指令实现OutClick的示例

    原始实现 下面是两种常见的模态框的实现方式 方案一:默认 click 都是放在冒泡阶段,只要在内容区域上添加 click 的阻止冒泡即可 <div class="cover" @click="close"> <!-- 阻止冒泡 --> <div class="content" @click.stop>modal content</div> </div> 方案二:通过代码判断点击触发的 D

  • 分析Vue指令实现原理

    目录 一.基本使用 二.指令工作原理 2.1.初始化 2.2.模板编译 2.3.生成渲染方法 2.4.生成VNode 2.5.生成真实DOM 三.注意事项 四.小结 一.基本使用 官网案例: <div id='app'> <input type="text" v-model="inputValue" v-focus> </div> <script> Vue.directive('focus', { // 第一次绑定元素

  • Vue指令工作原理实现方法

    Vue简介 现在的大前端时代,是一个动荡纷争的时代,江湖中已经分成了很多门派,主要以Vue,React还有Angular为首,形成前端框架三足鼎立的局势.Vue在前端框架中的地位就像曾经的jQuery,由于其简单易懂.开发效率高,已经成为了前端工程师必不可少的技能之一. Vue是一种渐进式JavaScript框架,完美融合了第三方插件和UI组件库,它和jQuery最大的区别在于,Vue无需开发人员直接操作DOM节点,就可以改变页面渲染内容,在应用开发者具有一定的HTML.CSS.JavaScri

随机推荐