Vue指令-02：v-html，v-show和v-if，v-on

已于 2024-03-05 11:54:16 修改
阅读量838 收藏 8
点赞数 8
分类专栏： vue入门学习 文章标签： vue.js html 前端
于 2024-03-04 16:43:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinfanfff/article/details/136450643
版权

1. v-html

  （1）概念

（2）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    {{ msg }}-->
    <div v-html="msg"></div>
    <div v-html="msgg"></div>

</div>

<!-- 引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>

    const app = new Vue({
        el:'#app',
        data:{
            msg:'<a href="http://www.itheima.com">你好世界</a>',
            msgg:'<h3>学vue 加油</h3>'

        }
    })

</script>


</body>
</html>

（3）常用指令 

（4）总结

2.v-show和v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            line-height: 100px;
            margin: 10px;
            border: 3px solid #000;
            text-align: center;
            border-radius: 5px;
            box-shadow: 2px 2px 2px #ccc;
        }
    </style>
</head>
<body>


<!--
v-show 底层原理：切换css 的display：none 来自控制显示隐藏
v-if   底层原理：根据判断条件 控制元素的 创建和移除（条件渲染）
-->
<div id="app">
    <div v-show="flag" class="box">我是v-show控制的盒子</div>
    <div v-if="flag" class="box">我是v-if控制的盒子</div>

</div>

<!-- 引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            flag:true
        }
    })
</script>


</body>
</html>

4.v-else和v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div id="app">
    <p v-if="gender === 1">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    <hr>
    <p v-if="score >=90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score >=70">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score >=60">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>

<!-- 引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            gender:2,
            score:80

        }
    })
</script>

</body>
</html>

3.v-on

（1）内联语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <p>v-on：事件</p>
    <hr>
<!--    点击事件-->
    <p>点击</p>
    <button v-on:click="count1--">-</button>
    <span>{{ count1 }}</span>
    <button v-on:click="count1++">+</button>
    <hr>
<!--    滑入-->
    <p>滑入</p>
    <button v-on:mouseenter="count2--">-</button>
    <span>{{ count2 }}</span>
    <button v-on:mouseenter="count2++">+</button>
    <hr>
    <p>’v-on：‘可以替换成‘@’</p>
    <p>点击</p>
    <button @click="count3--">-</button>
    <span>{{ count3 }}</span>
    <button @click="count3++">+</button>
    <hr>
</div>
<!-- 引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            count1:100,
            count2:100,
            count3:100

        }
    })
</script>
</body>
</html>

（2） 配置methods函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">我爱Vue</h1>
</div>
<!-- 引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isShow:true

        },
        methods:{
            fn(){
                // 让提供的所有methods中的函数，this都指向当前实例
                // console.log('执行了fn',app.isShow)
                // console.log(app === this)
                this.isShow = !this.isShow  //把app换成this更好维护
            }
        }
    })
</script>
</body>
</html>
</html>

（3）调用传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 3px solid #000000;
            border-radius: 10px;
            padding: 20px;
            margin: 20px;
            width: 200px;
        }
        h3 {
            margin: 10px 0 20px 0;
        }
        p {
            margin: 20px;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="box">
        <h3>小黑自动售货机</h3>
        <button @click="buy(5)">可乐5元</button>
        <button @click="buy(10)">咖啡10元</button>
        <button @click="buy(8)">牛奶8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
</div>

<!-- 引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            money: 100

        },
        methods: {
            buy(price){
                console.log(price)
                this.money -= price
            }
        }
    })
</script>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------------------- 

注：本人是根据黑马程序员的B站教程来学习的，
链接​​​​：前端最新Vue2+Vue3基础入门到实战项目全套教程，自学前端vue就选黑马程序员，一套全通关！_哔哩哔哩_bilibili

本文章仅仅是个人学习笔记 无任何其他用途 特此说明 

yinfanfff
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue系列之指令 v-html
老__L的博客
12-18 698
v-html指令
热门推荐
fushan2012的博客
02-22 4万+
V-html
深入了解Vue 3.0中的v-html指令：用法、安全性与最佳实践
最新发布
李长渊的博客
05-06 2400
深入了解Vue 3.0中的v-html指令：用法、安全性与最佳实践
Vue学习：v-html
weixin_47295886的博客
02-15 1953
v-html与插值语法的区别： v-html会替换掉节点中所有的内容，{{xx}}不会 v-html可以识别html结构 v-html有安全性问题 在网站动态渲染html是危险的，容易导致xss（cookie上的盗用）攻击 一定要再可信的内容上使用v-html,永远不要在用用户体积的内容上
vue-内置指令
qq_52135740的博客
07-27 367
内置指令 v-text指令： 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会 <div id="root"> <div>你好，{{name}}</div> <div v-text="name"></div> <div v-text="str"></div> </div> </body> <scrip
Vue的常用指令之v-html
Mr_xiaoxuboke的博客
05-19 1041
说明：在某些时候我们不希望直接输出<a href='http://www.baidu.com'>百度一下</a>这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。 代码如下： <div id="app"> <h2>{{url}}</h2> <!-- 不加v-html 打印的是字符串 --> <h2 v-html="url">&.
Vue 常用指令 内容绑定/事件绑定 v-text、v-html、v-on
小楼一夜听春雨，深巷明朝卖杏花
06-16 2833
但是使用v-html的时候那么html的各种属性都能够渲染出来。最终将v-text渲染为一个html的文本。在开发过程当中使用vue的语法，但是在实际最终会将vue的语法转化渲染为html页面。可以看到做文本的时候可以使用v-text，同时也可以看到在vue框架里面可以在HTML标签当中使用vue属性。在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。在整个vue的编写过程当中，只要带v-的，那么都是常用的vue的指令。显示HTML文本的，某些情况下，从服务端请求的数据本身就是一个。
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
10-17
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
Vue.js常用指令汇总（v-if、v-for等）
10-21
本文将详细介绍Vue.js中的几个常用指令：v-if、v-for、v-show、v-bind和v-on。 1. **v-if** - 条件渲染指令，用于根据表达式的布尔值决定是否渲染元素。`v-if`更倾向于在条件不满足时避免编译和渲染元素，从而提高...
vue基础之事件v-onclick="函数"用法示例
10-17
总的来说，`v-on:click`和其他类似的`v-on`指令允许我们响应用户的交互，结合Vue的数据模型和方法来更新视图。在实际应用中，这些事件处理可以更复杂，包括传递参数、处理异步操作等。理解并熟练掌握`v-on`事件处理...
vue.js绑定事件监听器示例【基于v-on事件绑定】
10-18
Vue.js 的 `v-on` 指令不仅可以绑定原生DOM事件，如 `click`、`mouseover` 和 `keydown`，还可以与自定义组件事件一起使用。此外，我们可以通过使用`.stop`、`.prevent`、`.capture`、`.self`和`.once`修饰符来改变...
Vue v-html用法
liubangbo的专栏
06-18 1万+
如果我们从服务器端获取到了HTML字符串，用浏览器显示出来。在Vue框架下，可以用v-html指令来做。例如： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue demo</title> </head> <body> <script src="./vue.js"></script> <
Vue指令——v-html
quietbxj的博客
08-03 1575
Vue指令是指v-开头的一系列指令，v-html指令的作用： 设置元素的innerHTML。 内容中包含有html结构会被解析成标签。 v-text指令只会解析成文本。 解析文本需要v-text，解析html结构用v-html。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=
v html的原生实现,Vue.js 源码分析(十九) 指令篇 v-html和v-text指令详解
weixin_36080842的博客
06-09 1431
双大括号会将数据解释为普通文本，而非 html 代码。为了输出真正的 html，你需要使用 v-html 指令，例如:documentvue.config.productiontip=false;vue.config.devtools=false;{{message}}var app = new vue({el:'#app',data:{message:'hell world!'}})渲染结果为:...
HTML简单实现v-if与v-for与v-model
Yyds12300的博客
10-28 1886
首先VIewModel将View和Model连接一起，Model的数据改变View的数据也变使用Visual Studio Code启动Vue需要vue.js插件和导入CDN(包)vue.js插件：CTRL + shift + x 在搜索栏搜索vue.js安装即可CDN：VS创建一个.html的文件< div>< /div>块为view层（模板）< script>< /script>块为Model层（数据）ViewModel的体现：在浏览器的控制面板（Console),输入。
Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
weixin_45092437的博客
09-05 1万+
通过官方文档可以得知两个重点：① 通过v-html生成的页面元素，不会被当做Vue模板进行编译，只会作为普通的html代码被插入，也就是说通过v-html插入的html@click、v-if等，则不会生效，因为他们没有被Vue编译，而浏览器并不会识别这些vue语法，所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性，那么该标签内的样式就不会对v-html生成的页面元素起作用，还是因为这些元素没有被当做Vue模板进行编译，所以不生效。
vue中v-html指令的使用之Vue知识点归纳(三)
代码小疯子
12-01 8677
本文章中将描述 v-html 指令的基本使用 v-html 的作用 v-html 与 v-text 的区别 1 简述 vue中v-html 标签，用解析设置带有html标签的文本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta nam...
【Vue】v-html 功能加强
qq_39559879的博客
08-08 899
v-html的功能是替换元素的innerHTML，在大部分场景下都够用，但是因为是直接替换innerHTML所以无法用 Vue 的事件监听方法。下面引入一个需求，来实现这个功能。
v-model:file-list="filesBZ"
07-27
v-model:file-list="filesBZ"是一个Vue中的指令，用于实现文件上传功能。它的作用是将文件列表与Vue实例中的数据进行双向绑定。具体来说，当用户选择了文件后，文件列表会自动更新，并将更新后的文件列表数据同步到Vue实例中的filesBZ属性中。反之，当Vue实例中的filesBZ属性发生变化时，文件列表也会相应地更新。这样就实现了文件上传功能的双向绑定。\[3\] #### 引用[.reference_title] - *1* *2* [vue3知识点2. 常用指令v-model :value v-if v-show v-for v-bind: :class :style v-on @](https://blog.csdn.net/yangyangdt/article/details/122021026)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue中 v-model 和 :model 的区别](https://blog.csdn.net/unlilalila/article/details/121234835)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值