vue指令：v-text、v-html、v-bind、v-model、v-on、v-for、v-if、v-show、v-else-if

最新推荐文章于 2023-03-05 09:56:18 发布
最新推荐文章于 2023-03-05 09:56:18 发布
阅读量265 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33767353/article/details/108950069
版权

导航

v-text和v-html

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

    <div id = "app"> 
        <!-- {{msg}} 这种插值表达式在网速慢的时候会插值闪烁 体验不是很友好，v-text、v-html是不会有闪烁的-->
        {{msg}} 
        {{1+2}}
        <span v-html="msg"></span><br>
        <span v-text="msg"></span>
    </div>


    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"<h1>hello</h1>"
            }
        })

    </script>
</body>
</html>

v-bind

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


    <div id = "app">
        <!-- v-bind给html标签的属性绑定值 例：-->
        <a v-bind:href="link">gogogo</a>
        <!-- v-bind 给class,stale 进行了增强 根据实际数据动态展示 {class名:是否加上的值} -->
        <!-- v-bind 可以直接简写为 ： 冒号，v-bind是属于单向绑定-->
        <span v-bind:class="{active:isActive,'text-danger':hasError}"
        v-bind:style="{color:color1,'font-size':size}">你好</span>
    </div>

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

        let vm = new Vue({
                el:"#app",
                data: {
                    link:"https://www.baidu.com",
                    isActive:true,
                    hasError:true,
                    color1:"blue",
                    size:"39px"
                },
            })
    </script>
</body>
</html>

v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单项，自定义组件 v-model属于双向绑定-->
    <div id="app">
        精通的语言：
            <input type="checkbox" v-model="language" value="java"/>java<br/>
            <input type="checkbox" v-model="language" value="php"/>php<br/>
            <input type="checkbox" v-model="language" value="python"/>python<br/>
            我选中了{{language.join("-")}}
    </div>



    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      let vm = new Vue({
            el:"#app",
            data:{
                language:[]
            }
        })
    </script>
</body>
</html>

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 事件中直接写js片段 -->
        <button v-on:click="number++">点赞</button>
        <!-- 事件指定一个回调函数，必填是Vue实例中定义的函数  v-on 事件可以简写为@-->
        <button @click="cancle()">取消</button>
        <h1>有{{number}}个赞</h1>


        <!-- 事件修饰符 -->
        <div style="border: 1px solid red; padding: 20px;" v-on:click.once="hello">
            大div 
            <div style="border: 1px solid blue; padding: 20px;" @click.stop="hello()">
                小div<br>
                <a href="https:wwww.baidu.com" @click.prevent>去百度</a>
            </div>
        </div>


        <!-- 按键修饰符  @click.ctrl=单击键加ctrl键（同时） -->
        <input type="text" v-model="number" v-on:keyup.up="number+=2" @keyup.down="number-=2" @click.ctrl="number=10"/><br>
        提示：
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                number:1
            },
            methods: {
                cancle() {
                    if (this.number > 0) {
                        this.number--
                    }
                },
                hello() {
                    alert("点击了");
                }
            },
        })
    </script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app"> 
        <ul>
             <!-- 1、显示user信息：v-for = "item in items" -->
            <li v-for = "user in users">
                {{user.name}} ==> {{user.gender}} ==> {{user.age}}
            </li>
            <br>
            <!-- 2、获取数组下标：v-for = (item,index) in items-->
            <li v-for = "(user,index) in users" v-if="user.gender == '女'">
                索引：{{index}}={{user.name}} ==> {{user.gender}} ==> {{user.age}}
            </li>
            <br>
            <!-- 3、遍历对象：
                v-for="value in object"
                v-for="(value,key) in object"
                v-for="(value,key,index) in object"
            -->
            <li v-for = "(user,index) in users">
                索引：{{index}}={{user.name}} ==> {{user.gender}} ==> {{user.age}}
                每一个对象信息：
                <span v-for = "(v,key,index) in user">
                    对象索引：{{index}}= {{key}} == {{v}};
                </span>
            </li>
            <br>
            
        </ul>

        <!-- 4、遍历的时候加上:key来区分不同数据，提高vue渲染效率 -->
        <ul>
            <li v-for="(num,index) in nums" :key="index">
                {{num}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                users:[
                    {name:"ysh",gender:"男",age:21},
                    {name:"柳岩",gender:"女",age:18},
                    {name:"张三",gender:"男",age:26},
                    {name:"古力娜扎",gender:"女",age:23}
            ],
            nums:[1,2,2,3,4,5,6]
            }
        })
    </script>
</body>
</html>

v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        v-if,顾名思义，条件判断，当得到结果为true时，所在的元素才会被渲染
        v-show,当得到结果为true时，所在元素才会被显示。
        show = !show : 赋值操作
     -->
    <div id = "app">
        <button v-on:click="show = !show">点我呀</button>
        <!-- 1、使用v-if显示 -->
        <h1 v-if="show">if=看到我...</h1>
        <!-- 2、使用v-show显示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                show:true
            }
        })
    </script>
</body>
</html>

v-if 和 v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id= "app">
        <button v-on:click="random=Math.random()">点我呀</button>
        <br>
        <span>{{random}}</span>

        <h1 v-if="random>=0.75">
            看到我啦？！ &gt;=0.75
        </h1>

        <h1 v-else-if="random>=0.5">
            看到我啦？！ &gt;=0.5
        </h1>

        <h1 v-else-if="random>=0.2">
            看到我啦？！ &gt;=0.2
        </h1>

        <h1 v-else>
            看到我啦？！ &lt;=0.2
        </h1>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
       let vm =  new Vue({
            el:"#app",
            data:{
                random:1
            }
        })
    </script>
</body>
</html>
*小海豚*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 通过自定义指令回顾v-内置指令(小结)
10-18
2. v-text和v-html：分别用于更新元素的文本内容和HTML内容，其中v-text不会解析HTML标签，而v-html则可以解析字符串中的HTML标签，两者均覆盖了元素的现有内容。 3. v-once：当数据首次绑定到元素上之后，后续数据...
Vue常用指令：v-text、v-html、v-model、v-for、v-if、v-else、v-show、v-bind、v-bind:class、computed、watch、console
QAQ
02-17 3552
一.指令 什么是指令？ 指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。 二、v-text和v-html 使用v-text和v-html指令来替代 {{}} 说明： v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出 v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染vue_day1/03_v-textandv-html.html： <!DOCTYPE html> <ht
vue系列：vue的常见指令——v-text、v-html、v-model、 v-cloak、v-bind、 v-on、v-if、v-show、v-for
TotoroChinchilla的博客
05-01 1601
vue的常见指令——v-text、v-html、v-model、 v-cloak、v-bind、 v-on、v-if、v-show、v-for
教程5 Vue3常用内置指令（插值、v-bind、v-model、v-on、v-text、v-html、v-once、v-pre、v-cloak、v-slot）
boxuestudio的博客
03-05 1426
教程5 Vue3常用内置指令（插值、v-bind、v-model、v-on、v-text、v-html、v-once、v-pre、v-cloak、v-slot）
vue模板语法
qq_36073688的博客
02-02 136
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id=".
Vue基本指令：v-on,v-if,v-mode
qi341500的博客
02-27 1396
Vue基本指令 1、v-text指令：设置标签的文本值 2、v-html指令：设置标签的innerHTML 3、v-on指令：为元素绑定事件 4、v-on:传参 5、v-show指令：根据真假切换元素的显示状态 6、v-if指令：根据表达式的真假切换元素的显示状态 7、v-bind：为元素绑定属性 8、v-for指令：根据数据生成列表结构 9、v-mode：便捷的设置和获取表单元素的值
vue中input的v-model清空操作
12-08
在Vue.js中，`v-model`是一个非常强大的指令，它实现了数据双向绑定，使得表单控件与Vue实例的数据能够实时同步。然而，在特定场景下，如在自定义组件中，我们可能需要处理一些特殊的需求，例如添加一个清除输入框...
vue- 基础使用 ，v-for、v-bind、v-if/v-else、v-show、v-model、.v-on
最新发布
03-08
在Vue中，有几个核心指令用于构建动态用户界面，这些指令包括`v-for`、`v-bind`、`v-if/v-else`、`v-show`、`v-model`和`.v-on`。下面将详细介绍这些指令的使用方法和场景。 1. `v-for`: 这个指令用于在DOM元素上...
vue-todolist:Vue-todolist
04-14
7. **指令与方法**：Vue提供了多种内置指令，如`v-if`/`v-show`用于条件渲染，`v-bind:class`/`v-bind:style`用于动态绑定样式。此外，`methods`选项定义了可调用的函数，这些函数可以在模板中通过`v-on`或`v-bind`...
HTML之Vue框架v-for、v-if的简单使用
你的大数据学长
02-17 6107
HTML之Vue框架 v-for、v-if 的简单使用目标代码结果展示 目标 数据定义一个数组，通过对v-for的使用，实现如下界面 使用v-if，使上述的奇数行不出现，效果如下图所示 代码 该代码可在我的GitHub中找到，链接在此 index1.html： <!DOCTYPE html> <html lang="en"> <head> <m...
vue.js v-model的运算
qq_37805832的博客
02-15 1428
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javasc
html如何用v-for遍历,v-for循环遍历
weixin_33511821的博客
06-10 3161
你这样定义data肯定有问题的第一次循环肯定是第一行{ "审核管理": [ { "title": "头像审核", "url": "userList" }, { "title": "动态审核管理", "url": "userActivity" }, { "title": "评论审核管理", "url": "comment" }, { "title": "举报管理", "url": "reportRe...
html如何用v-for遍历,浅析vue中常见循环遍历指令的使用 v-for
weixin_31970409的博客
06-17 841
vue中循环遍历使用的指令是v-for1.v-for遍历数组(1)value in arr 遍历数组中的元素(2)(value,index) in arr 遍历数组中的元素和数组下标运行代码：{{value}}{{value}}--{{index}}new Vue({el:".box",data:{arr:["哈哈","嘻嘻","哼哼"]}});输出结果：2.v-for遍历json对象(1)val...
html5 支持v-for吗,很多人不知道 v-for 可以这样解构！
weixin_36249804的博客
06-30 950
作者：Michael Thiessen译者：前端小智来源：medium点赞再看，养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。最近发现我们可以使用v-for进行解构。之所以起作用，是因为 Vue 将v-for的整个...
Vue 中自带指令（v-text、v-if、v-on、 v-bind等）解析（封装方法）
gebieren的博客
06-12 648
vue中自带指令分为三类，第一类是只有指令名的，如v-text、v-html、v-if等，第二类是指令名+参数的，如v-bind：class。第三类是指令名+参数+修饰符的，如v-on:click.stop。类别不同，所产生的功能就有所不一样，下面就通过自定义指令v-mytext,v-myon与v-mybind来实现v-text,v-on,v-bind的一样的功能。 v-mytext 指令 <body> <div id="app"> <h2>我是..
text html js中增加if判断,Vue.js前端框架系统学习（4）——Vue指令之v-text,v-html,v-if,v-show...
weixin_36108931的博客
06-18 224
写在前面的话：继续上一篇文章，来学习一下vue的指令。指令指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。常用的Vue指令：v-textv-htmlv-bindv-onv-modelv-for...
vue --- > v-text、v-show、v-if、v-else
栗子好好吃的博客
06-15 345
v-text: <div id = "app"> <p v-text="msg"></p> </div> <script> let app = new Vue({ el:'#app', data:{ msg:'Hello Vue' } }) &...
好程序员Python培训分享For循环用法详解
qq_35970166的博客
09-30 611
好程序员Python培训分享For循环用法详解，结合实例形式详细分析了Pythonfor循环的功能、原理、用法及相关操作注意事项，下面我们一起来看一下吧。 　　Python有两种类型的循环：for循环和while循环。for循环用来遍历可迭代对象。 　　可迭代对象是每次可以返回其中一个元素的对象,包括字符串、列表和元组等序列类型，以及字典和文件等非序列类型。还可以使用迭代器和生成器定义可迭代对象 For循环示例: iterable of cities cities = [‘new york city’, ‘
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值