• Vue 常用指令

    指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：下表

    指令

    作用

    v-bind

    为HTML标签绑定属性值，如设置 href , css样式等

    v-model

    在表单元素上创建双向数据绑定

    v-on

    为HTML标签绑定事件

    v-if

    条件性的渲染某元素，判定为true时渲染,否则不渲染

    v-else

    v-else-if

    v-show

    根据条件展示某元素，区别在于切换的是display属性的值

    v-for

    列表渲染，遍历容器的元素或者对象的属性

    1、指令 v-bind 和 v-model

    指令

    作用

    v-bind

    为HTML标签绑定属性值，如设置 href , css样式等

    v-model

    在表单元素上创建双向数据绑定

    （1）v-bind

    该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化

    例如：

    <a v-bind:href="url">百度一下a>

    上面的 v-bind:" 可以简化写成 : ，如下：

    2. <a :href="url">百度一下a>

    （2）v-model

    该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如：

    <input name="username" v-model="username">

    代码演示：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.     <a v-bind:href="url">点击一下a>
    10.     <a :href="url">点击一下a>
    11.     <input v-model="url">
    12. div>
    13.  
    14. <script src="js/vue.js">script>
    15. <script>
    16.     //1. 创建Vue核心对象
    17.     new Vue({
    18.         el:"#app",
    19.         data(){
    20.             return {
    21.                 username:"",
    22.                 url:"https://www.baidu.com"
    23.             }
    24.         }
    25.     });
    26. script>
    27. body>
    28. html>

    通过浏览器打开上面页面，并且使用检查查看超链接的路径，该路径会根据输入框输入的路径变化而变化，这是因为超链接和输入框绑定的是同一个模型数据

    2、指令 v-on

    指令

    作用

    v-on

    为HTML标签绑定事件

    我们在页面定义一个按钮，并给该按钮使用 v-on 指令绑定单击事件，html代码如下

    <input type="button" value="一个按钮" v-on:click="show()">

    而使用 v-on 时还可以使用简化的写法，将 v-on: 替换成 @，html代码如下

    <input type="button" value="一个按钮" @click="show()">

    上面代码绑定的 show() 需要在 Vue 对象中的 methods 属性中定义出来

    1. new Vue({
    2.     el: "#app",
    3.     methods: {
    4.         show(){
    5.             alert("我被点了");
    6.         }
    7.     }
    8. });

    注意：v-on: 后面的事件名称是之前原生事件属性名去掉on。

    例如：

    • 单击事件 ： 事件属性名是 onclick，而在vue中使用是 v-on:click

    • 失去焦点事件：事件属性名是 onblur，而在vue中使用时 v-on:blur

    整体页面代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.     <input type="button" value="一个按钮" v-on:click="show()"><br>
    10.     <input type="button" value="一个按钮" @click="show()">
    11. div>
    12. <script src="/js/vue.js">script>
    13. <script>
    14.     //1. 创建Vue核心对象
    15.     new Vue({
    16.         el:"#app",
    17.         data(){
    18.             return {
    19.                 username:"",
    20.             }
    21.         },
    22.         methods:{
    23.             show(){
    24.                 alert("我被点了...");
    25.             }
    26.         }
    27.     });
    28. script>
    29. body>
    30. html>

    3、条件判断指令

    指令

    作用

    v-if

    条件性的渲染某元素，判定为true时渲染,否则不渲染

    v-else

    v-else-if

    v-show

    根据条件展示某元素，区别在于切换的是display属性的值

    接下来通过代码演示一下。在 Vue中定义一个 count 的数据模型，如下

    1. //1. 创建Vue核心对象
    2. new Vue({
    3.     el:"#app",
    4.     data(){
    5.         return {
    6.             count:3
    7.         }
    8.     }
    9. });

    现在要实现，当 count 模型的数据是3时，在页面上展示 div1 内容；当 count 模型的数据是4时，在页面上展示 div2 内容；count 模型数据是其他值时，在页面上展示 div3。这里为了动态改变模型数据 count 的值，再定义一个输入框绑定 count 模型数据。html 代码如下：

    1. <div id="app">
    2.     <div v-if="count == 3">div1div>
    3.     <div v-else-if="count == 4">div2div>
    4.     <div v-else>div3div>
    5.     <hr>
    6.     <input v-model="count">
    7. div>

    整体页面代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.     <div v-if="count == 3">div1div>
    10.     <div v-else-if="count == 4">div2div>
    11.     <div v-else>div3div>
    12.     <hr>
    13.     <input v-model="count">
    14. div>
    15. ​
    16. <script src="js/vue.js">script>
    17. <script>
    18.     //1. 创建Vue核心对象
    19.     new Vue({
    20.         el:"#app",
    21.         data(){
    22.             return {
    23.                 count:3
    24.             }
    25.         }
    26.     });
    27. script>
    28. body>
    29. html>

    通过浏览器打开页面并在输入框输入不同的值，效果如下

    然后我们在看看 v-show 指令的效果，如果模型数据 count 的值是3时，展示 div v-show 内容，否则不展示，html页面代码如下 

    1. <div v-show="count == 3">div v-showdiv> 
    2. <br>
    3. <input v-model="count">

    浏览器打开效果如下：

    通过上面的演示，发现 v-show 和 v-if 效果一样，那它们到底有什么区别呢？我们根据浏览器的检查功能查看源代码

    通过上图可以看出 v-show 不展示的原理是给对应的标签添加 display css属性，并将该属性值设置为 none ，这样就达到了隐藏的效果。而 v-if 指令是条件不满足时根本就不会渲染。

    4、指令 v-for

    指令

    作用

    v-for

    列表渲染，遍历容器的元素或者对象的属性

    这个指令看到名字就知道是用来遍历的，该指令使用的格式如下：

    1. <标签 v-for="变量名 in 集合模型数据">
    2.     {{变量名}}

    ==注意：需要循环那个标签，v-for 指令就写在那个标签上。==

    如果在页面需要使用到集合模型数据的索引，就需要使用如下格式：

    1. <标签 v-for="(变量名,索引变量) in 集合模型数据">
    2.     
    3.    {{索引变量 + 1}} {{变量名}}

    代码演示：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.     <div v-for="addr in addrs">
    10.         {{addr}} <br>
    11.     div>
    12. ​
    13.     <hr>
    14.     <div v-for="(addr,i) in addrs">
    15.         {{i+1}}--{{addr}} <br>
    16.     div>
    17. div>
    18. ​
    19. <script src="js/vue.js">script>
    20. <script>
    21. ​
    22.     //1. 创建Vue核心对象
    23.     new Vue({
    24.         el:"#app",
    25.         data(){
    26.             return {
    27.                 addrs:["北京","上海","西安"]
    28.             }
    29.         }
    30.     });
    31. script>
    32. body>
    33. html>

    通过浏览器打开效果如下

  • 相关阅读:
    FPGA 20个例程篇：12.千兆网口实现MDIO接口读写
    字节跳动后端面经十
    嵌入式实时操作系统的设计与开发（消息）
    ubuntu中的系统消息中显卡显示llvmpipe (LLVM 10.0.0, 256 bits)
    表名注解/主键注解/字段注解/乐观锁注解[MyBatis-Plus系列] - 第486篇
    机器学习实训（3）——训练模型（补充）
    第26章_瑞萨MCU零基础入门系列教程之独立看门狗定时器-IWDT
    谁能拒绝摸鱼的时候来点代码图呢
    latex安装与使用
    适用于MES、WMS、ERP等管理系统的实体下拉框设计
  • 原文地址：https://blog.csdn.net/qq_45037155/article/details/126146585