vuejs-模板语法条件渲染v-for事件处理表单输入绑定

2025-03-08 约 4286 字预计阅读 9 分钟

https://bing.ee123.net/img/rand?artid=146075014

vuejs 模板语法、条件渲染、v-for、事件处理、表单输入绑定

创建vue项目之后我们就可以开始写代码了，我们的代码一般都会写在src目录-components目录-HelloWord.vue文件内。

我们之前写的HTML文件的结构是HTML代码可以集成或者连接外部的css/js文件。

我们通过vue建立的项目，它的结构是在一个vue文件内集成了HTML、css、JavaScript的代码。包含三个部分：<template><script><style scoped>分别对应HTML代码、JavaScript代码、css样式

模板语法

插值

模板语法我们使用的是{ {}}双花括号来进行插值的。

对比我们之前，如果要修改元素的值，就需要先获取对象。通过对象的属性去修改，而vue则是可以通过模板语法来进行修改。

<template>
<p>{{name}}</p>
<p>{{age}}</p>

</template>

<script>
export default {
  data(){
    return {
      name:"xxx",
      age:18
    }
  }
}
</script>

<style scoped>

</style>

这里首先我的p标签里面的两个{ {}}表明了我需要两个数据，一个是name，一个是age

然后script部分我通过return语句返回了name和age两个变量给它，它接收到之后渲染到页面中

{ {}}里面可以写变量和表达式。假如我传递了一个变量num，它的值是100

我{ {}}里面可以填写num*10这个表达式，或者num ? 10:100问号表达式，又或者是逻辑表达式a>b这种。但是我不能写一个if语句或者for语句

渲染html代码（类似于innerhtml）

如果我有一个code:"“百度需要渲染到HTML文件中

如果我直接使用刚才讲的{ {}}，那最后出现的结果就是HTML文件被原样写道里面，而不会被解析。

这个时候我们就需要使用v-html=“code"我们把这个HTML代码正确渲染到页面中

下面我们来看代码演示

//这是使用{{}}
<template>

<p>{{code}}</p>

</template>

<script>
export default {
  data(){
    return {
       code:`<a href = "https://www.baidu.com">百度</a>`,    }
  }
}
</script>

<style scoped>
</style>

//这是使用v-html
<template>

<p v-html="code"></p>

</template>

<script>
export default {
  data(){
    return {
       code:`<a href = "https://www.baidu.com">百度</a>`,
    }
  }
}
</script>

<style scoped>
</style>

他们的显示结果如图所示

这里我们可以发现使用v-html可以正常的渲染我们所需要的HTML标签，而{ {}}是给什么就显示什么

渲染属性

我们标签的class、id、data-？都是属性的一种。我们可以通过v-bind:class/id来设置

我们通过例子来学习

<template>
<p v-bind:id="id" :class="classss" :data-one="dataone" ></p>

</template>

<script>
export default {
  data(){
    return {
      id:"name",
      classss:"name",
      dataone:"one",
    }
  }
}
</script>

<style scoped>

</style>

通过网页源代码我们可以看到这些属性是正常被渲染上去了的。

语法格式就是 v-bind:class/id/data- =“属性值"这种方式，而且v-bind: 可以只写一个冒号 : 来代替

条件渲染

条件渲染就是根据不同的情况来渲染不同的界面

v-if（v-else）

大家发现没有，到现在我们所学的除了插值之外的所有语法都是以类似于标签的属性的语法来写的

v-if也是如此，它会根据“属性值”的布尔值来判断是否渲染该标签。

我们来看一个例子

<template>
<p v-if="flag">可以输出，imok</p>

</template>

<script>
let a =10
let b =11

export default {
  data(){
    return {
      flag:a<b
    }
  }
}
</script>

<style scoped>

</style>

这里我们首先声明了两个全局变量，然后给它们赋值。判断它们是否是符合return返回的表达式

如果合理返回true，v-if可以渲染。反之返回false，v-if不能渲染

我们也可以在v-if后面写一个表达式，比如说我想写一个大于六十就渲染可以写v-if:“num > 60”，然后我只需要把num给他就好了。

既然有if那就要有else了

v-else和js的else差不多，就是配对的if为false就执行else，为true就不执行。关于v-if和v-else配对的问题这里也简单说一下。

v-else会自动配对上文中的最近的、处于同一父元素的v-if

<p v-if="flag">可以输出，imok</p>
<p v-else>bukeyila</p>
  <p v-else>buke222222222222a</p>

这段代码，虽然有两个v-else，但是它们都会被匹配到上文的v-if

<div>
<p v-if="flag">可以输出，imok</p>
<p v-else>bukeyila</p>
</div>
  <p v-else>buke222222222222a</p>

这段带码就不会出现两个v-else匹配同一个，因为它直接报错了。主要原因就是前面的v-else与v-if处于同一父元素下，所以它们会配对，但是不在同一父元素下的哪个v-else就会因为找不到匹配的v-if而报错

v-else-if

这个就是else if，v-if判断不成功就会进入它，再进行判断。相当于if嵌套

通过代码我们可以很轻松的理解

<template>
<div>
<p v-if="flag>10">大于十</p>
<p v-else-if="flag>5">大于五</p>
  <p v-else>error</p>
</div>

</template>

<script>
let a =10
export default {
  data(){
    return {
      flag:a
    }
  }
}
</script>

<style scoped>

</style>

这里返回的flag是a变量a，它的值是10

然后我们会在v-if判断，结果是flase，然后跳转到v-else-if，结果是true，就会渲染对应的标签。这个就是把判断语句写入到了标签内。

v-show

单独的控制一个元素的显示与否。他与v-if用法一样，但是区别在于v-if是条件为真才进行渲染，v-show是不管条件真不真都会渲染，他控制的是对应标签的css（如：display）

我们在查看源代码的时候是可以看到v-show的标签的代码的，但是v-if只有在条件为真才可以看到

v-for

v-for是循环渲染，它会重复渲染所在的标签

我们依旧是通过代码来看：

<template>
  <ol>
    <li v-for="i in 10">{{i}}</li>
  </ol>
</template>

在这段代码中我并没有接收什么数据，我只是使用了一个i in 10给了v-for，然后打印这个li标签。

最后的结果就是我打印出了十个有序列表。然后i的数值是从1到10 这是我确认循环多少次，也可以把10换成一个变量

<template>
  <ol>
    <li v-for="i in num">{{i}}</li>
  </ol>
</template>
<script>
export default {
  data(){
    return{
      num:10,
    }
  }

}
</script>
<style>

</style>

大致就是这个样子，当然。num也可以是数组，我们可以通过传递数组来遍历。

<template>
  <ol>
    <li v-for="i in arr">{{i.name}}</li>
  </ol>
</template>
<script>
export default {
  data(){
    return{
      arr:[
        {name:"xxx"},
        {name:"yyy"},
        {name:"yyx"},
        {name:"yxx"},
      ]
    }
  }

}
</script>
<style>

</style>

这里我们传递了一个数组arr，它里面每一个元素都是一个对象。我们通过这个来访问对象里面的信息。

i in arr循环数组内每一个元素，i.name就是循环到元素的name属性。这里我们要注意的是使用v-for会根据循环的次数创建相应个数的标签。而且如果arr数组新加了几个元素，它并不会把所有的都重新渲染一遍。而是添加渲染新加入的元素。

：key

这个的作用是用于确认每一条代码的唯一性，也是为了预防一些错误的发生。我们在写数据的时候最好是给它们都设置上唯一的一个标识id。

它的使用语法是v-for=“i in arr” :key=“i.id” 这就需要我们为数据们添加一个id

事件处理

添加事件（监听事件）

使用的是v-on（或者简写成@）

<template>
 <button v-on:click="cont++">{{cont}}</button>
</template>
<script>
export default {
  data(){
    return{
     cont:0
    }
  }

}
</script>
<style>

</style>

在这段代码中，我们的按钮添加了一个v-on，它绑定的事件是单击。对应的处理是cont++，然后把cont实时渲染到按钮上

还有就是事件监听触发函数，这个函数我们就不能在data（）里面写了。函数有专门写它的地方

在data（）下面再写一个methods:{} 打括号里面填写方法

export default {
  data(){//数据部分
    return{
     cont:0
    }
  },
  methods:{//函数部分
    a:function (){
      alert("nihao")
    },
    meth(){
      console.log("meth")
    }
  }

}

如果想调用函数就可以这样写：@click=“a"点击触发a函数

如果我们想通过点击按钮来改变data里面的值，就需要借助this了。我们通过一个简单的例子来学习：

<template>
 <button v-on:click="meth">+1</button>//点击调用meth函数
  <p>{{cont}}</p>//渲染cont

</template>
<script>
export default {
  data(){
    return{//传递值
     cont:0
    }
  },
  methods:{
    meth(){//让data里面的cont自增
     this.cont++
    }
  }

}
</script>

methods里面的函数也是有event对象的。这个event和事件监听处理函数里面的event是一样的

参数传递。我们可以通过在写函数的时候meth(code)来声明它有一个形参code，然后在事件监听函数的处理函数里面传递实参@:click=“meth(“hello”)"，这个参数就会传递给meth函数里面的形参code

<template>
<div class="hello">
  <button @click="leijia">++</button>//点击触发leijia函数
  <hr>
  <button @click="getnum(cont)">getnum</button>//点击触发getnum函数并且传递一个cont实参
</div>
</template>
<script>
export default {
  name: 'HelloWorld',

  data(){
    return {
      cont:0,
    }
  },
  methods:{
    leijia(){//累加函数
      this.cont++;
    },
    getnum(a){//获取数字用的函数
      alert(`the number of conts is ${a}`);//这里可以改成打印this.cont
    }
  }
}
</script>

这个例子主要是为了让大家理解函数传参与不传参的写法

表单输入绑定

表单一直是前端比较重要的一个东西，我们来看一下表单输入绑定.我们使用v-model=““把表单元素的数据绑定到指定的变量上。它其实是绑定数据和监听输入的结合（语法糖）

我们通过简单的例子来看

<template>
<div class="hello">

  <input type="text" v-model="str">
  <span>{{str}}</span>
</div>
</template>
<script>
export default {
  name: 'HelloWorld',

  data(){
    return {
      str:""
    }
  },
  methods:{
  }
}
</script>

我们给输入框添加了一个v-model属性，并绑定了str变量。当我们输入数据的时候v-model会把数据写给str。然后span标签又会把数据渲染出来。

但是我们如果每次输入都要获取数据并且渲染的话是很麻烦的，所以就引入了v-model的修饰符

v-model.lazy=“str” ，这个的作用是我们输入的时候不会每次有新的内容都会渲染，而是按下回车键或者失去焦点的时候才会渲染

如果我们需要过滤掉用户输入的首尾空白字符就需要 v-model.trim 来进行修饰.它会去掉输入的数据开头和结尾的空白字符，但不会过滤掉数据中间的空白字符

修饰符是可以连用的：v-model.trim.lazy也是可以的