Vue(4)Vue指令的学习1「建议收藏」

Vue(4)Vue指令的学习1「建议收藏」前言Vue官网一共有提供了14个指令,分别如下v-textv-htmlv-showv-if☆☆☆v-else☆☆☆v-else-if☆☆☆v-for☆☆☆v-on☆☆☆v

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

Vue官网一共有提供了14个指令,分别如下

  • v-text
  • v-html
  • v-show
  • v-if ☆☆☆
  • v-else ☆☆☆
  • v-else-if ☆☆☆
  • v-for ☆☆☆
  • v-on ☆☆☆
  • v-bind ☆☆☆
  • v-model ☆☆☆
  • v-slot
  • v-pre
  • v-cloak
  • v-once

注意:☆代表重要常用的
 

v-text(v-指令名=”变量”,变量需要data提供数值)

<p v-text="info"></p>
<p v-text="'abc' + info"></p>
<script>
    new Vue({
        el: '#app',
        data: {
            info: 'a'
        }
    })
</script>

v-text="info"渲染页面结果为a,因为info是个变量,就直接展示变量所对应的值

v-text="'abc' + info"渲染页面结果为abca,当你想用字符串和变量拼接时,可以在字符串上增加单引号,这样程序就认为你这个是个字符串,字符串+info变量最后的结果就是字符串abca
 

v-html(可以解析html语法)

有时候我们的Vue对象中,或者是后台返回给我们一个段原生的html代码,我们需要渲染出来,那么如果直接通过{{}}渲染,会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现。示例代码如下:

<p v-html="'<b>ok</b>'"></p>
<p v-text="'<b>ok</b>'"></p>

以上两行代码除了用的vue指令不一样以外,没有任何区别,让我们先展示结果吧

ok
<b>ok</b>

v-html可以解析html的标签,而text传的是字符串,不用管字符串里面具体的内容是什么,统一都直接展示出原来的字符

 

v-once(只渲染元素和组件一次)

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<input type="text" v-model="msg" v-once>  // 只渲染一次
<p v-once>{{ msg }}</p>  

 

v-cloak(防止页面闪烁)

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
 

v-pre(了解)

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<div id="app">
  <span v-pre>{{message}}</span>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    }
  })
</script>

正常来讲我们会通过编译最后在网页上显示hello,但是使用了v-pre指令后,就会跳过编译,直接展示原始的标签内容也就是{{message}}
 

v-bind

 

绑定属性

如果我们想要在html元素的属性上绑定我们Vue对象中的变量,那么需要通过v-bind来实现。

<div id="app">
  <a v-bind:href="baidu">百度</a>
  <img :src="imgSrc" alt="">
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello",
      baidu: "https://www.baidu.com",
      imgSrc: "https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
    }
  })
</script>

我们只需要在绑定的属性前面添加v-bind:即可,当然我们也可以使用缩写:,直接写冒号即可
 

绑定Class

绑定Class有2种方式,一种通过数组绑定,一种通过对象绑定

1.通过对象的方式来实现:

<div id="app">
  <p v-bind:class="{color:isColor}">你好,世界</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isColor: true
    }
  })
</script>
<style>
    .color{
        color: blue;
    }
</style>

对象的方式即像上面的代码{color:isColor}keycolorvalueisColor,当value的值为true则渲染,为false则不渲染
 
2.通过数组的方式来实现:

<div id="app">
  <p :class="[classname1, classname2]">{{message}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello",
      classname1: "pcolor",
      classname2: "fontSize"
    },
  })
</script>
<style>
    .pcolor{
        color: red;
    }
    .fontSize{
        font-size: 30px;
    }
</style>

class需要绑定2个属性时,可以使用数组的方式
 

绑定Style

绑定Style也有2种方式,一种通过数组绑定,一种通过对象绑定

1.通过对象的方式来实现

<div id="app">
  <p :style="{fontSize:'100px'}">{{message}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    }
  })
</script>

注意:对象绑定的时候只能驼峰命名法fontSize,不能使用font-size否则会报错,100px加单引号就是字符串,不加则是变量,需要在data中添加变量
 

2.通过数组的方式来实现

<div id="app">
  <p :style="[style1, style2]">{{message}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello",
      style1: {background:'red'},
      style2: {fontSize:'30px'},
    }
  })
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165749.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 第一次有人把“分布式事务”讲的这么简单明了

    第一次有人把“分布式事务”讲的这么简单明了

  • native2ascii 用法_native to

    native2ascii 用法_native toDK native2ascii工具用法(2010-01-2814:25:30)转载标签:it分类:JAVA地带背景:在做Java开发的时候,常常会出现一些乱码,或者无法正确识别或读取的文件,比如常见的validator验证用的消息资源(properties)文件就需要进行Unicode重新编码。原因是java默认的编码方式为Unicode,而我们的计算机系统编码常常是GBK等编码…

  • java学生宿舍管理系统代码(java简单宿舍管理系统)

    分为三大类land.java(登陆界面)system.java(系统管理界面)sql.java(数据库操作,包括连接、断开、增删改查等操作)一、登陆界面及代码主要代码:登陆按钮事件publicvoidactionPerformed(ActionEvente){ //TODOAuto-generatedmethodstub if((JButton)e.ge…

  • Linux中rwx权限详解

    Linux中rwx权限详解1.rwx作用在文件时1>r:read,可以读取,查看2>w:writte,可以修改,但是不代表可以删除该文件,删除一个文件的前提是对该文件所在的目录(文件夹)具有写的权限,才能删该文件3>x:execute,可以被执行2.rwx作用在目录时1>r,ls查看目录内容2>w,可以修改,目录内创建+删除+重命名目录3&gt…

  • STL容器分类「建议收藏」

    STL容器分类「建议收藏」容器(container)是装有其他对象的对象。容器里面的对象必须是同一类型,该类型必须是可拷贝构造和可赋值的,包括内置的基本数据类型和带有公用拷贝构造函数和赋值操作符的类。典型的容器有队列、链表和向量等。在标准C++中,容器一般用模版类来表示。不过STL不是面向对象的技术,不强调类的层次结构,而是以效率和实用作为追求的目标。所以在STL并没有一个通用的容器类,各种具体的容器也没有统一的基类。

  • ROS机器人里程计模型

    ROS机器人里程计模型3.5移动机器人系统模型相信大家的机器人平台STM32端底层控制和机器人urdf建模都已经顺利完成了,在正式开始ros端编写机器人启动功能包之前,我们还不得不学习一些必要的理论知识。别担心数学不好,这里基本都是高中数学。下面我们开始,Areyouready?没准备好也开始了。3.5.1常用坐标系系统模型在移动机器人技术研究中,最为常用的坐标系统是笛卡尔坐标系统。而在SLAM算法研究中,有如下几个比较常见的笛卡尔坐标系统,它们分别为机器人坐标系XRYROR、传感器坐标系XSYSOS

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号