Vue學習(3)————————繫結Class繫結Style,雙向資料繫結，dom節點
阿新 • • 發佈：2018-11-24
標籤內繫結屬性（此功能看來可以動態繫結標籤屬性）
<template>
<div id="app">
<div v-bind:title="title">
滑鼠走一走
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
title : "滑鼠喵一喵"
}
}
}
</script>
小測試繫結個圖片路徑來一波
<div id="app"> <div v-bind:title="title"> <h1>滑鼠走一走</h1> <img v-bind:src="imageurl"/> </div> </div> </template> <script> export default { name: 'app', data () { return { title : "滑鼠喵一喵", imageurl : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540457844377&di=51f497b9b09af6129317c9977b2cc79c&imgtype=0&src=http%3A%2F%2Fimg.ph.126.net%2F5lKdv1Apo0v4IOka67Vz5A%3D%3D%2F1392738184765824158.jpg" } } }
v-bind其實可以省略
:imagesurl 也可以（瞭解）
如果想在script裡寫程式碼可以這麼玩
<template> <div id="app"> <div v-html="h2"></div> </div> </template> <script> export default { name: 'app', data () { return { h2:"<h2>我是一個存在於Script的H2</h2>" } } } </script>
————————————————————————————————————————————
v-bind：class的使用（繫結style）
<template> <div id="app"> <div v-html="h2"></div> <div> <h1 v-bind:class="{red : true}">LOOKLOOK</h1> </div> </div> </template> <script> export default { name: 'app', data () { return { h2:"<h2>我是一個存在於Script的H2</h2>" } } } </script> <style lang="scss"> .red{ color: red; } </style>
格式是<h1 v-bind:class="{red : true}"> ture就是給與 false就是沒有
下面有個小測試，只讓第一行變色
<table border="" cellspacing="" cellpadding="">
<tr v-for="(item,key) in solalist" v-bind:class="{red:0==key}">
<td>{{item}}</td>
<td>{{key}}</td>
</tr>
</table>下面來動態的設定一下div的大小
<template>
<div id="app">
<div class="box" v-bind:style="{width:widthsize+'px' , height:heightsize+'px'}">
瞅瞅
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
widthsize:300 ,
heightsize:300
}
}
}
</script>
<style lang="scss">
.red{
color: red;
}
.box{
background: deepskyblue;
}
</style>——————————————————————————————————————————————————
雙向資料繫結 MVVM
MVVM :Model改變會影響檢視view，view檢視改變反過來影響model
<template>
<div id="app">
<div class="box" v-bind:style="{width:widthsize+'px' , height:heightsize+'px'}">
瞅瞅
</div>
<h2>{{msg}}</h2>
<input type="text" v-model="msg"/>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
widthsize:300 ,
heightsize:300,
msg:'hello world'
}
}
}
</script>
再寫個方法來測試一下
<template>
<div id="app">
<div class="box" v-bind:style="{width:widthsize+'px' , height:heightsize+'px'}">
瞅瞅
</div>
<h2>{{msg}}</h2>
<input type="text" v-model="msg"/>
<button v-on:click="getMsg()">MVVM測試按鈕</button>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
widthsize:300 ,
heightsize:300,
msg:'hello world'
}
},methods:{
getMsg(){
alert(this.msg);
}
}
}
</script>
設定model同樣改變檢視
<template>
<div id="app">
<div class="box" v-bind:style="{width:widthsize+'px' , height:heightsize+'px'}">
瞅瞅
</div>
<h2>{{msg}}</h2>
<input type="text" v-model="msg"/>
<br />
<button v-on:click="getMsg()">獲取MVVM測試按鈕</button><br />
<button v-on:click="setMsg()">設定MVVM測試按鈕</button>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
widthsize:300 ,
heightsize:300,
msg:'hello world'
}
},methods:{
getMsg(){
alert(this.msg);
},
setMsg(){
this.msg = '奮起吧，鹹魚！'
}
}
}用dom來獲取表單資料（this.$refs就是獲取dom節點）
<template>
<div id="app">
<input type="text" ref="inputsola"/><br />
<button v-on:click="getInputValue()">另一種獲取表單資料的方法</button>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
widthsize:300 ,
heightsize:300,
msg:'hello world'
}
},methods:{
getInputValue(){
//獲取ref定義的dom節點
alert(this.$refs.inputsola.value);
}
}
}ref就相當於指定id，我來用ref設定文字的值玩玩
<template>
<div id="app">
<h1 ref="text">暫時值為空</h1>
<input type="text" ref="inputtext"/>
<button v-on:click="setTextValue()">換換內容</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
}
},methods:{
setTextValue(){
var temp = this.$refs.inputtext.value;
this.$refs.text.innerText = temp;
}
}
}
</script>