v-bind和v-model的本質區別和做用域

時間 2020-06-01

標籤 bind model 本質區別简体版

原文原文鏈接

每篇一句

一場寂寞憑誰訴。算前言，總輕負。php

Vue視圖數據展現方式和彼此的區別:

{{}}插值表達式裏面只能寫表達式,不能寫語句
文本輸出,不會解析標籤
不能做用在標籤的屬性上,設置屬性值,只能用於標籤內部用於顯示數據

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入門案例</title>
    <!--引入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<!--view視圖展現數據-->
<div id="app">
    <!--{{插值表達式}}  vue顯示數據方式-->
    {{message}} ======{{number+1}}===={{flag ? "真":"假"}}
</div>

</body>
<!--模型-->
<script>
    var vue = new Vue({
        el:"#app", //將id爲app的區域 交給vue管理
        data:{
            message:"hello vue .....", //聲明初始化模型數據
            number:18,
            flag:false
        },
        methods:{
            //全部方法
        }
    })
</script>
</html>

v-text和v-html

v-text不會解析標籤,只能解析文本
v-html會解析標籤,以後顯示
二者只能做用域屬性上,是一種屬性修飾符,不能寫在標籤體內

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text和v-html.html</title>
    <script src="../js/vuejs-2.5.16.js"></script>

</head>
<body>
<div id="app">
    插值表達式不會解析標籤<br>
    {{message}}
    <hr>

    v-text:不會解析html,只能解析文本
    <div v-text="message"></div>
    <hr>
    v-html : 能夠解析標籤和文本
    <div v-html="message"></div>
     <hr>
	不能寫在標籤體內
 	<div> v-html="message"</div>

</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "<h1>Hello VUE</h1>"
        }
    });
</script>
</html>

v-bind

只能做用域屬性上,是一種屬性修飾符
省略寫法是:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<h1 style="text-align: center">插值表達式不能做用在標籤的屬性上,遇到這種狀況就要使用v-bing</h1>
    <font size="5" v-bind:color="ysl">堅持下去!</font>
    <font size="5" :color="ysl2">堅持下去!</font>
    <hr>
    <a v-bind={href:"http://www.baidu.com/"+info}>百度搜索java</a><br>
    <a :href="address">京東</a>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            ysl:"red",
            ysl2:"green",
            info:"s?wd=java",
            address:"http://www.jd.com"
        }
    });
</script>
</html>

還有一種特殊的:v-model數據雙向綁定

前面的都只能顯示vue對象中數據, 頁面數據的變化不會影響vue對象中的數據
而v-model綁定的數據,頁面數據的改變,vue對象中的數據也會跟着改變,這很是關鍵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <h1>需求:使用vue賦值json數據，並顯示到頁面的輸入框中（表單回顯）。
        點擊提交按鈕，改變json數據，驗證同時輸入框的內容也發生改變。
    </h1>
    插值表達式:  {{user.username}} ,{{user.password}}  <br>
    v-model 雙向綁定,輸入的值會改變模型的值:<input type="text" v-model="user.username"> <br>
    v-bind 單向綁定,輸入的值不會改變模型的值:<input type="text" v-bind:value="user.username"> <br>
    v-model 密碼:<input type="text" v-model="user.password"> <br>
    <input type="button" @click="fun()" value="按鈕(改變模型的值)"> <br>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            user:{
                username:"路飛",
                password:"123456"
            }
        },
        methods:{
            fun:function () {
                alert(this.user.username+"   "+this.user.password);
                this.user.username="佐助";
                this.user.password="666666";
            }
        }
    });
</script>
</html>

相關標籤/搜索

每日一句

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