Vue 模板语法指令语法 v-bind

红色框里面的都是vue的模板。上面只是简单的双括号加上表达式，这种叫做插值语法，除了这种语法还有其他语法吗？bind可以给标签里面任何一个标签属性动态的绑定值。通过上面可以看到插值语法往往用于指定标签体内容，也即是html元素中间部分。插值语法实现的功能很单一，就是将指定的值放到指定的位置。在data当中，不仅仅可以是基本的数据类型，还可以是对象。所以data里面的数据可以是多级的结构。vue里面

富士康质检员张全蛋

2703人浏览 · 2023-11-15 16:00:42

富士康质检员张全蛋 · 2023-11-15 16:00:42 发布

红色框里面的都是vue的模板，有了模板就得有模板的特殊语法。上面只是简单的双括号加上表达式，这种叫做插值语法，除了这种语法还有其他语法吗？

（1）插值语法实现的功能很单一，就是将指定的值放到指定的位置。

（2）还有一种叫做指令语法v-bind，它能够完成的就相对高端一些。

任意的属性都可以通过v-bind去改变属性的值。也即是将值动态的设定，它可能来自于vue一个变量。vue里面的指令很多，指令都是以v-开头。下面其实就是将执行的结果绑定给v-bind

<a v-bind:href="url">点击我去百度</a>   
//如果加上v-bind:，那么vue会将引号里面包着的东西url拿出来当js表达式去执行，url就相对于变量
      new Vue({    
          el: "#app",   
          data:{ 
            name: "lucas",
            url: "https://www.baidu.com",
          }
       })

v-bind可以指定任何一个属性，bind可以给标签里面任何一个标签属性动态的绑定值，v-bind:可以简写为:冒号。

    <div id="app">
        <h1>hello world name:{{name}}</h1>
        <a v-bind:href="url" v-bind:x="hello">点击我去百度</a>
    </div>
         
    <script type="text/javascript"> 

    Vue.config.productionTip = false     
      new Vue({    
          el: "#app",   
          data:{ 
            name: "lucas",
            url: "https://www.baidu.com",
            hello: "xxx",
          }
       })

通过上面可以看到插值语法往往用于指定标签体内容，也即是html元素中间部分。这部分需要渲染可以使用插值语法。

v-bind不管理标签里面的内容，它是用于管理标签的属性。

Vue模板语法有2大类：插值语法和指令语法

1.插值语法：

功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法：

功能：用于解析标签(包括：标签属性、标签体内容、绑定事件...)。
举例：v-bind:href="xxx" 或简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

在data当中，不仅仅可以是基本的数据类型，还可以是对象，所以data里面的数据可以是多级的结构。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--引入vue,这里引入vue那么这里就多了vue构造函数-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
 
<body>  
    <div id="app">
        <h1>hello world name:{{name}} school里面的name:{{school.name}}</h1>
        <a v-bind:href="school.url" v-bind:x="hello">点击我去百度</a>
    </div>
         
    <script type="text/javascript"> 

    Vue.config.productionTip = false     
      new Vue({    
          el: "#app",   
          data:{ 
            name: "lucas",
            school:{
                name: "jerry",
                url: "https://www.baidu.com",
            },
          }
       })
    </script>
 
</body>
</html>

对于插值语法没有什么高深的玩法，就两对花括号{{}}里面写上表达式。

v-bind 动态绑定样式

v-bind:class="{active: true}" active后面是布尔类型，如果为true那么显示css样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
        .box{
            width: 500px;
            height: 500px;
            background-color: yellow;
        }
        .active{
            background-color: red;
        }
    </style>
</head>

<body>    
    <div id="vue">
      <button v-on:click="changeStyle()">改变样式</button>
      <a v-bind:href="url" >hello vue</p>
    
      <div class="box" v-bind:class="{active: true}"></div>

    </div>

    <script type="text/javascript">
     
     var vueDemo = {
        data() {
            return {
                url: "http://www.baidu.com",
            }
        },
        methods: {
            changeStyle(){

            }
        },
     }
        
    Vue.createApp(vueDemo).mount("#vue")

    </script>

</body>
</html>

v-bind:class="{active: true} 如果为false，则不显示样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
        .box{
            width: 500px;
            height: 500px;
            background-color: yellow;
        }
        .active{
            background-color: red;
        }
    </style>
</head>

<body>    
    <div id="vue">
      <button v-on:click="changeStyle()">改变样式</button>
      <a v-bind:href="url" >hello vue</p>
    
      <div class="box" v-bind:class="{active: isActive}"></div>

    </div>

    <script type="text/javascript">
     
     var vueDemo = {
        data() {
            return {
                url: "http://www.baidu.com",
                isActive: true
            }
        },
        methods: {
            changeStyle(){
               if ( this.isActive == true ) {
                   this.isActive = false
               }else{
                   this.isActive =true
               }
            }
        },
     }
        
    Vue.createApp(vueDemo).mount("#vue")

    </script>

</body>

</html>

后面定义的样式优先级都被前面的优先级高。，后面定义的样式会覆盖前面的样式。

所以要不要添加样式取决于这个布尔值，这个布尔值以变量的方式出现

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^