react 实现vue里面的 v-html&&v-if&&v-show.html

最新推荐文章于 2024-04-26 21:09:28 发布
最新推荐文章于 2024-04-26 21:09:28 发布
阅读量6k 收藏 1
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35568483/article/details/79957130
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="header"></div>
        <!--React 的核心库-->
        <script src="../../js/react.js"></script>
        <!--React-->
        <!--提供与 DOM 相关的功能   V-->
        <script src="../../js/react-dom.js"></script>
        <!--ReactDOM-->
        <script src="../../js/babel.js"></script>
        <script type="text/babel">
            //v <= render(m)  function return就是一切 函数是第一公民
            //v <=> template(m)
            //JSX
            //渲染
            //单向数据绑定  M->V
            //函数式编程  过滤器
            //M
            var data = {
                num:20,
                bool:true,
                color:'red',
            }
            //V
            ReactDOM.render(
                <div>
                    {/*v-html*/}
                    <h2>
                        {(()=>{
                            return <p>123<span>456</span></p>
                        })()}
                    </h2>
                    {/*v-show*/}
                    <h2 style={{
                        display:data.bool?'block':'none'
                    }}>
                        显示或者隐藏
                    </h2>
                    {/*v-if*/}
                    {((bool)=>{
                        if(bool){
                            return "测试v-if"
                        }else{
                            return;
                        }
                    })(data.bool)}
                    {/*v-bind:  :xxx*/}
                    <p name={(()=>{
                        return "这是一个测试的名字"
                    })()}>name</p>
                    {/*@xxx  v-on:xxx*/}
                    <button onClick={()=>{
                        console.log("点击事件")
                    }}>OK</button>
                </div>, document.querySelector("#header"))
        </script>
    </body>
</html>
mystraight
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
v-if&&v-for&&v-show
偷只猫来养的博客
08-19 1468
v-if&&v-for&&v-show （1）v-if：通过删除和添加节点来显示页隐藏节点，是直接操作DOM的指令，当频繁切换节点时，会频繁的造成重排和重绘，导致效率降低，不建议使用它；而在操作节点不频繁的情况，比如说系统权限问题时，比较适合使用v-if，使用的语法如下： <div @click="change"> <button type="button">第一个</button> <button type="button"&g
2022年前端Vue常见面试题大全（三万长文）持续更新...-vue面试题.zip
02-05
7.v-if与v-show的区别？ 8.什么是MVVM？ 9.Vue修饰符有哪些？ 10.函数式组件使用场景和原理 11.能说下 vue-router 中常用的路由模式实现原理吗？ 12.GET和POST的区别 13.cookie和seesion区别 14.跨域的方法 ...
react-htmltext:用于ReactHTML到文本组件（本机）
05-09
react-htmltext 用于ReactHTML到文本组件（本机） 这是为了什么？ 我们在开发过程中面临的主要问题是，Android和iOS中的WebView多么不可靠。 事实上，它运行缓慢且在Android上无法使用，因为我们无法正确测量内容高度。 这小段代码带走了您简单的html文档，并将其转换为本地React（Native）组件。 老实说-它仅在React Native上进行了测试，因此我不知道它是否对网络人员有用。 它写了大约2个小时。 可以更漂亮吗？ 当然。 是否符合我们的需求？ 100％。 随时贡献自己的力量。 它是如何工作的？ //(...) import HTMLText from "react-htmltext" ; //(...) render ( ) { const html = "<p>Lorem ipsum dolor sit amet, con
在React中实现Vue中的v-html效果
weixin_53452096的博客
07-23 4834
在React中实现Vue中的v-html效果使用原生操作使用dangerouslySetInnerHTML 使用原生操作 //在函数组件之中 let [str,setStr]=useState("<h1>hello world</h1>") let toJsx=()=>{ document.getElementById("box").innerHTML(str) //获取dom元素，使用innerHTML插入内容 } <div id="box"> {toJs
vue的v-model、v-if、v-for用react语法实现
最新发布
geng1025的博客
04-26 720
在React中，没有直接对应于Vue中的v-modelv-if和v-for的指令，但你可以使用React的特性和组件来实现类似的功能。
React V6实现v-if、v-show、v-html
_小郑有点困了的博客
06-29 1313
在vue中使用v-if、v-show、v-html这些命令得心应手，那么react是否也存在这样的命令呢？似乎是没有的，需要自己实现，也就是用原生的写法直接控制dom。
react中实现防vue中的v-if 和v-show指令切换效果
CodingNoob
01-29 9320
最新在看react的时候发现，vue里面的很多东西在react里面都没有，好多都要自己去实现，vue已经实现了很多我们经常用到的东西，react基本都要自己去写，很灵活，赋予开发人员更多的空间，现在模拟一下v-if和v-show的实现方式。 效果图如下： 父组件： import React, { Component } from 'react'; // import logo f...
vue学习笔记
qq_36333315的博客
04-17 176
一 ： v-if作用 ： 判断是否加载固定的内容，如果为真，就加载，否则不加载用处 : 用在权限管理，页面加载语法 : v-if="判断表达式"特点 : 控制元素插入或删除，而不是隐藏（v-show是隐藏）v-if与v-show的区别 :v-if的安全级别更高，v-show只是隐藏了，通过页面源代码还是可以看到，安全级别低、v-if更高的切换消耗（切换消耗指从未加载到加载或者从加载到未加载的状况，...
vue面试题-vue常见面试题和答案.pdf
11-29
4. **v-show和v-if的区别**： - 共同点：都可以控制元素的显示和隐藏。 - 不同点：v-show通过CSS的display属性控制，始终编译；v-if则会根据条件动态地生成或移除DOM元素，性能消耗相对较大。频繁切换时用v-show，...
babel-plugin-react-directives:一个babel插件，提供了一些react（JSX）指令，类似于vue指令
05-01
babel-plugin-react-directives 一个babel插件，它为react（任何JSX）提供一些指令，类似于vue的指令。 现在，您可以在在线尝试它。目录 X秀X为X级相关配套已知的问题更新日志执照 用法需要节点v10.0.0或更高版本， ...
Top 50 Vue.js Interview Questions.docx
09-06
Vue.js Interview Questions ...同时，我们还可以了解到 Vue.js 的一些内置指令，如 v-for、v-show、v-if、v-else、v-bind、v-model 等，以及如何在 Vue.js 中创建一个 Vue 实例、创建自定义过滤器、使用虚拟 DOM 等。
Vue.js知识—— v-if && v-else、v-show、v-for、购物车案例
xiaotangyu7dong的博客
08-26 581
Vue.js知识v-if && v-else用户登录切换的案例v-showv-for数组中哪些方法是响应式的购物车案例 v-if && v-else <body> <div id="app"> <h2 v-if="isShow">{{message}}</h2> <h2 v-else>如果信息为false，就显示我</h2> </div> <script sr
Vue.js中v-if&&v-show的使用
weixin_53002680的博客
12-04 1270
前言 在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来） 相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗
VUE中if条件语句||与&&的使用
热门推荐
weixin_46554787的博客
09-22 5万+
VUE中if条件语句||与&&的使用 1、||与&&同时使用 v-if="!item.canReceiveAward &&(item.receiveStatus === 1 || item.receiveStatus === -1 )" 2、只是用||在if条件语句中使用（||条件之间是或者的关系） v-if=“totalData.coolStorage ‘–’||totalData.coolStorage’ ’ ?flag:!flag” 3、只是用&am
一图看懂 vue的v-model语法糖 && react的受控组件
qq_45524401的博客
09-01 340
vue的v-model语法糖 vue学习笔记 这不就是一毛一样的数据双向绑定吗 vue <template> <div class="VModel"> v-model 语法糖 <input type="text" @change="txt=$event.target.value" :value="txt" > </div&g
vue v-if && v-show && v-html实现原理以及区别
Aifangmy的博客
04-26 1281
v-if： v-if会先调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染。 v-show： v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display。 v-html： v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。 总结： v-if 和 v-s
vue v-html scoped,基于vue中的scoped坑点解说
weixin_42447265的博客
07-08 418
今天在覆盖iview组件样式的时候发现一个问题，就是无法覆盖组件原有的样式，最后在github的issue中找到了答案：不要使用scoped属性。于是我查找了下关于scoped的文章。我们假设把这种组件叫做模块私有组件，其他的未加scoped的叫做模块一般组件。通过查看DOM结构发现：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。代码如下：//v...
vue scope的css样式无法应用于v-html内容解决办法
来老师的专栏
03-21 441
我们在页面中实现内容显示时，经常会使用v-html绑定用户输入的内容，而用户在输入时，尤其是使用图片时，往往会不指定图片的大小，这时如果用户上传的图片过大的话，在页面中会很难看。 此时vue的scope样式，却无法应用给这些内容，但是我们可以使用深度选择器：
v-if && v-show的区别以及使用场景
wuyanhong529的博客
05-18 191
1、相同点： 都能使元素显示或隐藏。 2、区别： v-if 是通过控制DOM节点是否存在来控制元素的显示或隐藏；v-show 是通过设置DOM元素的display样式，block为显示，none为隐藏； v-if 有更高的切换消耗；v-show有更高的初始渲染消耗。 3、使用场景： 如果需要非常频繁地切换，使用v-show； 如果在运行时条件很少改变，使用v-if，可以减轻服务器的压力。 ...
react v-html
08-18
在React中实现类似Vue中的v-html效果，可以使用dangerouslySetInnerHTML属性来实现。这个属性允许你将一个包含HTML标签和内容的字符串直接插入到DOM中的指定位置。使用方法是在要插入HTML的元素上设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值