正文

vue2.0学习—v-html指令（四十六）(代码片段)

王同学要努力  王同学要努力  2022-12-03  454

关键词：

【Vue2.0学习】— v-html指令（四十六）

知识储备：cookie简略图示

v-html指令：

作用：向指定节点中渲染包含html结构中的内容

与插值语法的区别：
v-html会替换掉节点中所有的内容XX不会
v-html可以识别html结构

严重注意：
在网站是哪个动态渲染任意的html是非常危险的，容易导致XSS攻击
一定要在可信的内容上使用v-html，不要在用户提交的内容上使用

<div id="root">
    <h2>你好，name</h2>

    <h2 v-html="str"></h2>
</div>
<script>
    const vm = new Vue(
        el: '#root',
        data: 
            name: '张三',
            str: '<h4>小王童鞋</h4>'
        
    )
</script>

vue2.0学习—v-pre指令（四十八）(代码片段)

【Vue2.0学习】—v-pre指令（四十八）v-pre指令跳过其所在节点的编译过程可利用它跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译<divid="root"><h2v-pre>Vue其实很简单</h2><h2... 查看详情

vue2.0学习—v-text指令（四十五）(代码片段)

【Vue2.0学习】—v-text指令（四十五）v-text指令：作用：向其所在的节点中渲染文本内容与插值语法的区别：v-text会替换掉节点中的内容，XX不会<divid="root"><h2>你好，name</h2><h2v-tex 查看详情

vue2.0学习—v-cloak指令（四十七）(代码片段)

【Vue2.0学习】—v-cloak指令（四十七）v-cloak指令：本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性使用css配合v-cloak可以解决网速慢时页面展示出XXX的问题本小结知识点补充属性选择器&... 查看详情

vue2.0学习—列表过滤（四十）(代码片段)

【Vue2.0学习】—列表过滤（四十）数据监视实现：<divid="root"><h2>人员列表</h2><inputtype="text"placeholder="请输入名字"v-model="keyWord"> 查看详情

vue2.0学习—列表排序（四十一）(代码片段)

【Vue2.0学习】—列表排序（四十一）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content=&# 查看详情

vue2.0学习—过滤器（四十四）(代码片段)

【Vue2.0学习】—过滤器（四十四）<divid="root"><h2>显示格式化后的时间</h2><h4>现在是:fmtTime</h4><h4>现在是:getTime()</h4&g 查看详情

vue2.0学习—收集表单数据（四十三）(代码片段)

【Vue2.0学习】—收集表单数据（四十三）v-model的三个修饰符：lazy：失去焦点再收集数据number:输入字符串转为有效的数字trim:输入首尾空格过滤<body><divid="root"><form@submit.prevent="demo" 查看详情

vue2.0学习—vue监视数据的原理（四十二）(代码片段)

【Vue2.0学习】—Vue监视数据的原理（四十二）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content& 查看详情

vue2.0通过v-html指令编辑的富文本无法修改样式的原因

在最近的项目中遇到的问题：v-html编辑的富文本，无法在样式表中修改样式；<template><divclass="descBox"v-html=‘desc‘></div></template><script>exportdefault{data(){return{desc:"<p>IbelieveIcanfly</p 查看详情

vue2.0学习—el与data的两种写法（三十六）(代码片段)

【Vue2.0学习】—el与data的两种写法（三十六）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"conten 查看详情

vue2.0学习-内部指令(代码片段)

vue2.0学习(一)-内部指令GitHub源码https://github.com/sunnyguyan/VueDemo1.v-ifv-elsev-showv-if:是vue的一个内部指令,指令用在我们的html中v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称<divv-if=‘isLog... 查看详情

尚硅谷vue系列教程学习笔记(代码片段)

尚硅谷Vue系列教程学习笔记（5）参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7笔记上传说明：上述课程中共有... 查看详情

vue2.0学习-的内部指令

vue2.0学习(一)-内部指令GitHub源码v-ifv-elsev-showv-ifdq 查看详情

zabbix学习笔记（四十六）

Zabbix学习笔记（四十六）-Zabbix系统的报表功能实现zabbix系统的报表功能，应该是在zabbix5.4版本的时候推出的，由于功能非常简单，只能通过邮件发送pdf文件，至今没有在生产环境中没有使用，甚至测试。今天疫情期间封控在... 查看详情

vue2.0学习—路由的两种工作模式（六十六）

【Vue2.0学习】—路由的两种工作模式（六十六）对于一个url来说，什么是hash值？#以及后面的内容就是hash值hash值不会包含在HTTP请求中，即：hash值不会带给服务器hash模式：地址中永远带着#号，不美... 查看详情

vue2.0的漫长学习ing-8(代码片段)

其他内部指令(v-pre&v-cloak&v-once) v-pre指令　　在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。<divv-pre>message</div>　　这时我们就无法获得message的值了，会直接输出mess... 查看详情

vue2.0—常用的内置指令(代码片段)

【Vue2.0】—常用的内置指令（九）<body><divid="root"><h1v-pre>好好学习</h1><h1>name</h1><h1v-text="name"></h1><h2v-html=& 查看详情

vue2.0学习—条件渲染（三十九）(代码片段)

【Vue2.0学习】—条件渲染（三十九）一、v-for指令1、用于展示数据的列表2、语法：v-for="(item,index)"inXXX:key="yyyy"3、可遍历数组、对象、字符串、指定次数<divid="root"><h2>人员列表</h2... 查看详情