學習筆記——Vue-有解無憂

2022-10-26

Vue屬性的基本操作

一、系結

（1）單向系結

關鍵詞：v-bind

用法：v-bind:原屬性名="資料模型的key值"

例如：v-bind:href="https://www.cnblogs.com/isDaHua/archive/2022/10/26/username"（其中"username"中的說明放在“script”說明中）

簡寫：可以省略“v-bind”，但是不能省略冒號，

（2）雙向系結

關鍵詞：v-model

用法：v-model:原屬性名="資料模型的key值"

例如：v-model:value="https://www.cnblogs.com/isDaHua/archive/2022/10/26/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="https://www.cnblogs.com/isDaHua/archive/2022/10/26/username">{{aMsg}}</a>-->
14 <!--        單向系結的簡寫-->
15         <a :href="username">{{aMsg}}</a>
16 <!--        雙向系結-->
17 <!--        <input type="text" v-model:value="https://www.cnblogs.com/isDaHua/archive/2022/10/26/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" >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腳本的，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/520696.html

標籤：其他

上一篇：javascript編程單執行緒之異步模式Asynchronous

下一篇：帶有連接節點的鏈接的聚集氣泡