学习笔记——Vue

2023-03-02

div html flag

2022-10-26Vue属性的基本操作一、绑定（1）单向绑定关键词：v-bind用法：v-bind:原属性名="数据模型的key值"例如：v-bind:href="username"（其中"username"中的说明放在“script”说明中）简写：可以省略“v-bind”，但是不能省略冒号。（2

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>