2、Vue基礎語法

時間 2020-05-06

標籤 vue 基礎語法简体版

原文原文鏈接

六：Vue的v-bind指令做用：綁定標籤上的全部屬性其簡寫 ":"javascript

6.1：例如：Hello world====>Hello worldcss

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <script src="https://vuejs.org/js/vue.min.js"></script>
 8     <style>
 9         .p-style1 {
10             background-color: aquamarine;
11             color: red;
12         }
13 
14         .bolder {
15             font-weight: bolder;
16         }
17 
18         .p-style2 {
19             background-color: rgb(255, 215, 129);
20             color: blue;
21         }
22         [v-cloak] {
23             background-color: burlywood;
24         }
25     </style>
26 </head>
27 <body>

View Code

<div id="app">
        <p v-bind:id="'pTest'"></p>
        <p :id="idName"></p>
</div>
<script>
        var vm = new Vue({
            el: "#app",
            data: {
                idName: "dataP",        
            }
        });
    </script>

View Code

</body>
</html>

說明： //這個p標籤的id號是pTesthtml

//這個p標籤的id號是dataPvue

在ie瀏覽器上顯示以下圖java

6.2:Vue的v-bind指令在：class=""等號右邊的雙引號能夠使用js表達式：showStyle是data中的變量p-style1是頂部的css中的樣式瀏覽器

<div id="app">
  <p :class="showStyle?'p-style1':''">ppppppp</p>
</div>
    <script>
        var vm = new Vue({
            el: document.getElementById("app"),
            data: {
                showStyle: true              
            }
        });
    </script>

</body>
</html>

　　在ie瀏覽器中顯示如圖所示app

6.3Vue中的：class也能夠向下面這個樣子寫ide

<div id="app">
  <p :class="{'p-style1':showStyle}">pppppppp</div>
    <script>
        var vm = new Vue({
            el: document.getElementById("app"),
            data: {
                showStyle: true              
            }
        });
    </script>

在ie瀏覽器中顯示效果如圖和6.2顯示效果是一個樣的url

7、Vue的v-model雙向數據綁定spa

1）v-model能夠處理 input、textArea、select、radio、checkBox、button：該屬性只能用在表達那標籤，或有value屬性的標籤上。

2）v-cloak vue中自帶的指令，做用是當加載完成後移除該指令屬性，即咱們但願任何在沒有加載完成以前呈現的樣式均可以同過v-cloak來渲染

3）v-once使用該指令，頁面視圖只渲染一次

7.1剛開始msg=Hello 經過v-model指令實現了雙向數據綁定即msg=Hello world

 1     <div id="app" v-cloak>
 2         {{msg}}
 3         <input type="text" v-model="msg">
 4     </div>
 5 <script>
 6         var vm = new Vue({
 7             el: "#app",
 8             data: {
 9                 msg: "Hello"
10             }
11         });
12     </script>

View Code

如圖所示

7.2Vue實現range範圍擴大和縮小

<div id="app" v-cloak> {{msg}} <br>
        <input type="text" v-model="range">
        <input type="range" v-model="range">
</div>
  <script>
        var vm = new Vue({ el: "#app", data: { msg: "Hello", range: 100 } }); </script>

在ie瀏覽器中顯示的效果如圖所示

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。