1.靜態(tài)數(shù)據(jù)綁定
<body>
<div id="app">
<ul class="btn">
<li @click="action(0)">btn1</li>
<li @click="action(1)">btn2</li>
<li @click="action(2)">btn3</li>
<li @click="action(3)"> btn4</li>
</ul>
<div class="text">
<p v-show="n==0">text1</p>
<p v-show="n==1">text2</p>
<p v-show="n==2">text3</p>
<p v-show="n==3">text4</p>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: { n: 3 },
methods: {
action: function (i) {
this.n = i
}
},
})
</script>
</body>
對想要操縱的元素綁定方法傳參，在實(shí)例中將對應(yīng)數(shù)據(jù)進(jìn)行重新綁定，在HTML中通過獲取屬性進(jìn)行渲染
2.模擬數(shù)據(jù)綁定
2.1數(shù)組綁定
<body>
<div id="app">
<ul class="btn">
<li v-for="(item, i) in btn" :key="i" @click="n=i">{{item}}{{i}}</li>
</ul>
<div class="text">
<p v-for="(item, ind) in text" :key="ind" v- show="n==ind">{{item}}---{{n}}</p>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
n: 3,
btn: ["btn1", "btn2", "btn3", "btn4"],
text: ["text1", "text2", "text3", "text4"]
},
})
</script>
</body>
2.2數(shù)組對象綁定
<body>
<div id="app">
<ul class="btn">
<li v-for="(item, i) in content" :key="i" @click="n=i">{{item.btn}}{{i}}</li>
</ul>
<div class="text">
<p v-for="(item, ind) in content" :key="ind" v-show="n==ind">{{item.text}}---{{n}}</p>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
n: 3,
content: [{"btn": "btn1", "text": "text1" },
{ "btn": "btn2","text": "text2"},
{"btn": "btn3","text": "text3"},
{"btn": "btn4","text": "text4"}, ]
},
})
</script>
</body>
3.用axios獲取動(dòng)態(tài)數(shù)據(jù)進(jìn)行綁定
getData: function () {
const that = this;
axios({
method: 'get', //請求方式
url: 'http://localhost:5050/data' //接口
}).then(function (res) {
if (res.status == '200') {
that.item = res.data //將獲取的數(shù)據(jù)賦給實(shí)例對象
}
}).catch(function (error) {
})
}
