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>
<body>
<div id="app">

    <p>上午好{{info}}</p>
    <p v-text="info">上午好</p>
    <p v-html="info">上午好</p>
    <hr>
    <p v-text="addr">hhh</p>
    <p v-html="addr">hhh</p>
    <hr>
    <p v-text="addr2">hhh</p>
    <p v-html="addr2">hhh</p>
</div>

</body>
</html>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            info:"good",
            addr:"<a href='https://www.baidu.com'>点击进入百度</a>",
            addr2:'<a href="https://www.baidu.com" rel="external nofollow" >百度</a>'
        }
    });
</script>

到此这篇关于vue中{{}},v-text和v-html区别与应用详解的文章就介绍到这了,更多相关vue中{{}},v-text和v-html区别与应用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决Django layui {{}}冲突的问题

    layui的table的自定义模板需要用到{{}},但是和Django的{{}}冲突了,layui的{{}}失效了 解决方法:从Django 1.5开始,支持{% verbatim %}标签(verbatim的意思是逐字翻译的,字面意思的),Django不会渲染verbatim标签包裹的内容 <table class="layui-table" lay-data="{ height:332, url:'/get_shop_table_msg/', page:false,

  • 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 data有值,但是页面{{}} 取不到值的解决

    我的问题出在js引入的顺序不对,导致不能正常显示vue中的值 正确的顺序应该是: 先引入vue的js--------html代码-----最后引入自己写的js 补充知识:vue中子组件的created.mounted生命周期钩子中获取不到props中的值问题 父子组件通信 这个很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 . 例如:在父组件中 <template> <div> <div :Data="Data"></d

  • 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"><

  • 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

  • SpringBoot中注解@ConfigurationProperties与@Value的区别与使用详解

    SpringBoot中注解@ConfigurationProperties与@Value的区别与使用详解

    目录 注解@ConfigurationProperties 注解@Value 区别 松散语法绑定: SpEl语法表示: JSR303数据校验: 复杂类型封装: 配置文件注入值数据校验 注解@ConfigurationProperties 该注解的作用是将配置文件中配置的每一个属性的值,映射到这个组件中.@ConfigurationProperties :告诉springboot将本类中的所有属性和配置文件中相关的配置进行绑定 prefix = "person":配置文件中哪个下面的所有

  • PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )

    PHP中有eAccelerator.memcached.xcache.APC 4个加速.缓存扩展,下面给大家介绍下其区别,一起看看吧! 折腾VPS的朋友,在安装好LNMP等Web运行环境后都会选择一些缓存扩展安装以提高PHP运行速度,常被人介绍的有 eAccelerator.memcached.xcache.Alternative PHP Cache这几个缓存扩展,它们之间有什么区别?分别的作用又是什么?我们如何选择?这是本文给于大家的答案. 1.eAccelerator eAccelerato

  • 基于vue中对鼠标划过事件的处理方式详解

    鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&

  • java中的前++和后++的区别示例代码详解

    java中的前加加++和后加加++,有很多人搞的很晕,不太明白!今天我举几个例子说明下前++和后++的区别! 其实大家只要记住一句话就可以了,前++是先自加再使用而后++是先使用再自加! 前++和后++总结:其实大家只要记住一句话就可以了,前++是先自加再使用而后++是先使用再自加! 请大家看下面的例子就明白了! public class Test { public static void main(String[] args) { //测试,前加加和后加加 //前++和后++总结:其实大家只要

  • 在vue中封装方法以及多处引用该方法详解

    步骤: 1.先建立一个文件,放你想封装的方法:然后导出: 部分代码: 注: 导出这个地方需要特别注意:如果是一个对象的话:export 对象:如果是一个函数的话:export { 函数 } 2.引入文件: 补充知识:vue uni-app 公共组件封装,防止每个页面重复导入 1.公共插件 实现目标,将公共组件或者网络请求直接在this中调用,不需要再页面引用 #例如网络请求 var _this = this; this.api.userInfo({ token: '' } #通用工具 _this

  • Vue中Router路由两种模式hash与history详解

    hash 模式 (默认) 工作原理: 监听网页的hash值变化 -> onhashchange事件, 获取location.hash 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转 主要用在单页面应用(SPA) // 模拟原理 // 监听页面hash值变化 window.onhashchange = function(){ // 获取当前url的哈希值 const _hash = locat

  • Vue 中指令v-bind动态绑定及与v-for结合使用详解

    目录 前言: 一. v-bind动态绑定class 1. v-bind动态绑定class(对象语法) 2. v-bind动态绑定class(数组用法) 3.v-bind动态绑定style(对象语法) 4.v-bind动态绑定style(数组语法) 二.v-bind和v-for的结合使用 前言: 在昨天的文章中已经基本介绍了,v-bind的基本使用,可以参考学习,本文是更加具体的解释v-bind的使用,和v-for结合的使用. 一. v-bind动态绑定class 1. v-bind动态绑定cla

  • vue中的双向数据绑定原理与常见操作技巧详解

    本文实例讲述了vue中的双向数据绑定原理与常见操作技巧.分享给大家供大家参考,具体如下: 什么是双向数据绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也是算是vue的精髓之处了.值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提,如果我们使用vuex,那么数据流也是单向的,这时就会和双向数据绑定有冲突,我们可以这么解决.

  • vue中i18n的安装与几种使用方式详解

    vue中i18n的安装与几种使用方式详解

    目录 vue中i18n安装 项目中的使用 使用方式 组件里使用 使用方式js 总结 介绍 Vue I18n 是 Vue.js 的国际化插件.它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中. vue中i18n安装 1.在项目中安装i18n npm install vue-i18n 2.如果在一个模块系统中使用它,你必须通过 Vue.use() 明确地安装 vue-i18n: import Vue from 'vue' import VueI18n from 'vue-i18n'

  • vue中路由传参以及跨组件传参详解

    路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> 路由

随机推荐