Vue自學之路11-屬性綁定

時間 2021-08-13

標籤 javascript html vue java 微信 app 運維 ide 測試 this 欄目 JavaScript 简体版

原文原文鏈接

Vue屬性綁定

屬性綁定指的是Vue中屬性綁定到變量，實現MVVMjavascript

Vue屬性綁定語法

v-bind語法html

<a v-bind:href='url'></a>vue

縮寫方式java

<a :href='url'></a>微信

原生JS操做屬性的方法（DOM操做）

getAttribute：獲取html標籤的屬性
setAttribute：設置html標籤的屬性

屬性綁定的例子

<div id='app'>

　　<!--原生html語法-->

　　<a href='http://www.baidu.com'></a>

　　<!--寫法1：屬性綁定到url插值-->

　　<a v-bind:href='url'></a>

　　<!--寫法2：屬性綁定到url插值-->

　　<a :href='url'></a>

　　<button @click='change'></button>

</div>

 

<!-- 先下載vue.js -->

<script type='text/javascript' src='js/vue.js'></script>

<script>

//1. html中書寫標籤

//2. 引入vue.js

//3. 使用vue進行數據渲染。


var vm = new Vue(

{

　　el: '#app', //綁定到id選擇器

　　data: {

　　　　"url": "http://www.baidu.com",

　　},methods: {

　　　　change: function(){

　　　　this.url = 'http://www.taobao.com'

}

}

}

)

</script>

傳送門：2021最新測試資料&大廠職位

博主：測試生財（一個不爲996而996的測開碼農）app

座右銘：專一測試開發與自動化運維，努力讀書思考寫做，爲內卷的人生奠基財務自由。運維

內容範疇：技術提高，職場雜談，事業發展，閱讀寫做，投資理財，健康人生。ide

csdn：https://blog.csdn.net/ccgshigao測試

博客園：https://www.cnblogs.com/qa-freeroad/this

51cto：https://blog.51cto.com/14900374

微信公衆號：測試生財（按期分享獨家內容和資源）