学习笔记——Vue

  • 学习笔记——Vue已关闭评论
  • 17 次浏览
  • A+
所属分类:Web前端
摘要

2022-10-26Vue属性的基本操作一、绑定(1)单向绑定关键词:v-bind用法:v-bind:原属性名=”数据模型的key值”

2022-10-26

Vue属性的基本操作

一、绑定

(1)单向绑定

关键词:v-bind

用法:v-bind:原属性名="数据模型的key值"

例如:v-bind:href="username"(其中"username"中的说明放在“script”说明中)

简写:可以省略“v-bind”,但是不能省略冒号。

(2)双向绑定

关键词:v-model

用法:v-model:原属性名="数据模型的key值"

例如:v-model:value="username"

简写:可以省略“:value”,结果为:v-model="username",注意此处双向绑定的属性值默认为“value”。

扩展:在双向绑定中,有一个“trim”函数,它可以用于删除字符串首尾的空格。使用的方式例如:v-model.trim="username"。常用在如果需要输入用户的名称时,可以取出首尾的空格。

----------

使用实例

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4     <meta charset="UTF-8">  5     <title>Title</title>  6     <script src="vue.js"></script>  7 </head>  8 <body>  9     <div id="app"> 10         <div>{{msg}}</div> 11         <p>{{msg}}</p> 12 <!--        单向绑定--> 13 <!--        <a v-bind:href="username">{{aMsg}}</a>--> 14 <!--        单向绑定的简写--> 15         <a :href="username">{{aMsg}}</a> 16 <!--        双向绑定--> 17 <!--        <input type="text" v-model:value="username"/><br/>--> 18 <!--        双向绑定的简写--> 19 <!--        <input type="text" v-model="username"/><br/>--> 20 <!--        去除字符串的首尾空格--> 21         <input type="text" v-model.trim="username"/><br/> 22         <input type="button" value="哈哈哈" @click="getValue"/> 23     </div> 24  25 </body> 26 <script> 27     new Vue({ 28         "el" : "#app", 29         "data":{ 30             "msg":"div的内容123", 31             "aMsg":"点我", 32             "username":"admin " 33         }, 34         "methods":{ 35             "getValue": function(){ 36                 alert(this.username); 37                 this.username = "root"; 38             } 39         }, 40     }) 41 </script> 42 </html>

    说明:“value” 表示在浏览器中运行时,显示在前端的。

二、条件渲染

作用:根据条件判断元素是否能够显示

分类:(1)v-if:"true":是显示;“false”:是不显示。

  (2)v-else:注意“v-if”与“v-else”中间是不能加其他标签,不然会阻断的。

  (3)v-show:如果是不显示,是通过CSS样式隐藏的。

-----------

使用实例:

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4     <meta charset="UTF-8">  5     <title>Title</title>  6     <script src="vue.js"></script>  7     <style>  8         .divs{  9             border: 1px solid #ff0000; 10             width: 200px; 11             height: 200px; 12         } 13     </style> 14 </head> 15 <body> 16     <div id="app"> 17         <div v-if="flag" class="divs">div1</div> 18 <!--        <div v-else="flag" class="divs">div2</div>--> 19         <div v-show="flag" class="divs">div3</div> 20         <input type="button" value="按钮" @click="changeDiv"> 21     </div> 22     <script> 23         new Vue({ 24             el:"#app", 25             data:{ 26                 flag:true, 27             }, 28             methods:{ 29                 changeDiv:function(){ 30                     this.flag = !this.flag; 31                 }, 32             }, 33         }) 34     </script> 35 </body> 36 </html>

    说明:注意第6行是导入vue脚本的。