A, v-model and radio buttons (Radio)
<div ID = "App">
<INPUT name = "Sex" value = "male" type = "radio" v- model = 'aaa'> change monitoring data M //!
<input name = "sex" value = " female" type = "radio" v- model = 'aaa'> F
</ div>
<Script the src = "./ vue.js"> </ Script>
<Script>
the let App = new new Vue ({
EL: '#app' ,
Data: {
AAA: 'M' // value corresponding to the value can be set is selected by default
},
})
</ Script>
Two, v-model and a box (CheckBox)
<div ID = "App">
<input type = "checkbox" value = " eat" v-model = 'like' > eat
<input type = "checkbox" value = " sleep" v-model = 'like' > sleep
<input type = "checkbox" value = " play Peas" v-model = 'like' > play Peas
<P> like {{}} </ P>
</ div>
<Script the src = "./ VUE. JS "> </ Script>
<Script>
the let App = new new Vue ({
EL: '#app' ,
data: {
like: [] // array for receiving data
},
})
</ Script>
Three, v-model and drop-down list (select)
<div the above mentioned id = "App">
<select = v-Model 'Checkout'> // drop-down list only binding on you can select
<option value = "eat"> eat </ the Option>
<option value = "sleep "> sleep </ Option>
<Option value =" play Peas "> play Peas </ Option>
</ SELECT>
<P> Checkout {{}} </ P>
</ div>
<Script the src =." /vue.js "> </ Script>
<Script>
the let App = new new Vue ({
EL: '#app' ,
Data: {
Checkout: 'play Peas' // here who bound, it is the default show who.
} ,
})
</script>
v-model small case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<header>
<label>
<input type="text" placeholder="请输入内容……" @keyup.enter='push'>
</label>
</header>
<section>
<ul>
<li v-for='(item,index) of getArr'>
<span>{{item}}</span>
<button @click='remove(index)'>删 除</button>
}
})
</ Script>
</ body>
</ HTML>
V-Model modifiers
<div the above mentioned id = "App">
<- to achieve a two-way data binding -!> <- <the INPUT of the type = "text":! = value "the Message" @ the INPUT = 'the Fn'> -> // value value value binding to
<-! v-model loses focus modifier .lazy ...... .number is a return data type ->
<INPUT type = "text" V-model.lazy = 'Message'>
< P> Message {} {} </ P>
</ div>
<Script the src = "./ vue.js"> </ Script>
<Script>
the let App = new new Vue ({
EL: '#app' ,
Data: {
Message: 'does not support the native value, so that by binding, add:'
},
Methods:{
fn(e){ this.message=e.target.value;
}
}
})
</script>
Four, computed (calculated property) Note: property! Attributes! Attributes! ! ! ! It is an attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="computed">
<p>{{usename}}</p> //此处不再加括号！！！属性
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#computed',
data: {
firstname: 'Lebron',
LastName:
}'James' ,
},
computed: { // Calculation --- property because property, so write directly, without brackets coupled
// usename () {
// return this.firstname this.lastname + + '.'
// }
/ / calculated property characteristics: a cache,
// expand writing;
usename: {
/ / inside a get () method and set () method;
get () {
return the this .firstname + + '.' the this .lastName
} ,
SET (Val) {
}
}
})
</ Script>
</body>
</html>
Getting vue small demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin:0;padding:0;}
ul,li{list-style: none;}
section{width:600px;height:400px;margin:200px auto;border: 2px solid #000;position: relative;left: 200px;;}
.td{border-bottom: 1px solid rebeccapurple;width: 100%;height:50px;}
.header{float: left;margin:0 40px;line-height: 50px;}
.con{width:600px;height:70px;border-bottom: rebeccapurple 1px solid;display: flex;justify-content: space-around;}
p{float: left;height: 70px;line-height: 70px;text-align: center;width:100px;}
P:nth-of-type(3){display: flex;justify-content: space-around;width:100px;height:50px;align-items: center;}
button{margin-right: 0;width:80px;height:25px;background:rgb(207, 205, 204);outline: none;border: none;border-radius: 10px;cursor: pointer;}
div{position: absolute;bottom: 0;left: 0;}
</style>
</head>
<body>
<div id="app">
<section>
<ul class="td">
<li class="header">商品名</li>
<li class="header">价格</li>
<li class="header">数量</li>
<li class="header">产地</li>
<li class="header">删除</li>
</ul>
<ul>
<li class="con" v-for='(item,index) in message'>
<p>{{item.name |fruit}}</p>
<p>{{item.price | setMoney}}</p> // | 是一个管道，后接过滤
<p><button class="ctrl" @click='cut(index)'> - </button>{{item.num}}<button @click='add(index)'> + </button></p>
<p>{{item.city}}</p>
<p><button @click='remove(index)'>删 除</button></p>
</li>
</ul>
<div>总价格:{{allPrice | allMoney}}</div>
</section>
</div>
<script src="./vue.js"></script>
<script>
App the let = new new Vue ({
EL: '#app' ,
Data: {
Message: [
{
name: 'Fuji' ,
. price: 15 ,
NUM: . 5 ,
City: 'Jingning' ,
},
{
name: 'melon' ,
. price: 10 ,
NUM: 10 ,
City: 'Xinjiang' ,
},
{
name: 'banana' ,
. price: 20 is ,
NUM: 10 ,
City: 'trimethylene' ,
},
{
name: 'grapes' ,
. Price: 15 ,
NUM: . 5 ,
City:'Hamilton' ,
},
]
},
Methods: {
Cut (I) {
the this .message [I] .num>. 1 && the this .message [I] .num--; // if false && rear face expression will not be executed
},
the Add (I) {
the this .message [I] .num <10 && the this .message [I] .num ++ ;
},
Remove (I) {
the this .message.splice (I,. 1 )
}
},
computed: {
allPrice () {
return the this .message.reduce ((prevPrice, nowPrice) => {
return prevPrice + (* nowPrice.price nowPrice.num)
}, 0 )
}
},
Filters: { // filter
setMoney (. price) { // argument must an array of items to be screened! ! !
return '¥' + +. price '.00'
},
Fruit (name) {
return 'Fruit:' + name
},
allMoney (allPrice) {
return '¥' allPrice + + '00.'
}
}
})
</script>
</body>
</html>
Five, watch (monitoring)
<body>
<div id="app">
<!-- <input type="text" v-model='dog'> -->
<input type="text" v-model='obj.b.c'>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
dog:'哈士奇',
obj:{
a:1,
b:{
c:222,
}
}
},
computed:{
},
watch:{ // monitor data changes.
// Dog (nValue is, Ovalue) {
// the console.log (nValue is, Ovalue)
// }
// 'obj.a' (newVal, oldVal) {
// the console.log (newVal, oldVal)
// }
// deep listening;
obj: {
Handler (newVal, oldVal) {
console.log (newVal.bc, oldVal.bc)
},
deep: to true , // deep monitor, handle this method must be written and fixed,
}
}
} )
</ Script>