Vue的賦值
vue有4種賦值方式
1.文本的方式
2.HTML的方式
3.屬性的方式
4.表達式
<!--在樣式中加
<style>
.class1{
font-size: 12px;
color: darkgreen
}
</style>
-->
<body>
<div id="wenb">
<h2>vue的四種賦值方式</h1>
<h3>1.文本的方式</h2>
{{name}}
<h3>2.html的方式</h3>
<div v-html="html"></div>
<h3>3.屬性的方式</h3>
<!--這裏的class1指向的是vue裏面的class1，然後vue裏面的class1再指向class名-->
<!--v-bind指令：綁定一個屬性，比如class，id等-->
<div v-bind:class="class1">湖南嶽陽</div>
<!--可以使用JavaScript使用的方式-->
<h3>4.表達式的方式</h3>
{{number+1}}
<input value="xxxx" v-bind:class="'type_'+id"/>
</div>
<script>
var vue1=new Vue({
el:'#wenb',
data:function(){
return {
name:'xxxx',
html:'<input value="女" type="text"/>',
class1:'class1',
number:17,
id:12
}
}
})
</script>
</body>
Vue的指令
指令，指的是v-前綴的特殊屬性
一步用的有v-if|v-else-if|v-else/v-for/v-on/v-bind/v-show/v-model
v-if|v-else-if：相當於if elseif else
v-for：相當於for循環
v-on：綁定事件
v-bind：綁定屬性
v-show：顯示
v-model：雙向綁定數據
<body>
<div id="div1">
<h2>vue的指令</h2>
<h3>v-if|v-else-if|v-else</h3>
<!--判斷是男還是女-->
<div v-if="sex==0">
男
</div>
<div v-else-if="sex==1">
女
</div>
<div v-else>
不知
</div>
<h3>v-for</h3>
<!--循環遍歷集合-->
<div v-for="u in users">
{{u.id}}----{{u.name}}
</div>
<h3>v-show</h3>
<!--如果選中就顯示，不選中就隱藏-->
<input type="checkbox" v-model="show"/>
<div v-show="show">
小行星小行星嘻嘻嘻嘻嘻嘻
</div>
<h3>實現複選框默認選中</h3>
<div v-for="(u,i) in users">
<!--@click綁定的事件中獲取了複選框的值-->
{{i+1}}<input type="checkbox" v-bind:value="u.id" v-model="sid" @click="dclick()"/>{{u.name}}
</div>
</div>
<script>
var vue=new Vue({
el:'#div1',
data:{
sex:'0',
users:[
{id:1,name:'xx1'},
{id:2,name:'xx2'},
{id:3,name:'xx3'}
],
<!--默認選中-->
sid:[1],
show:'true'
},
methods:{
dclick:function(){
console.log(this.sid);
}
}
})
</script>
</body>
Vue的過濾
相當於過濾器
有局部過濾器和全局過濾器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>過濾器</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!--引入時間的js-->
<script src="date.js"></script>
</head>
<body>
<div id="div3">
<h2>過濾相當於過濾器</h2>
<h3>全局過濾器---在創建vue對象的上面定義</h3>
<div>
{{time}}<br/>
{{time|formatDate}}
</div>
<h3>局部過濾器</h3>
<div>
{{card|cardNum}}
</div>
</div>
<script>
<!--v是參數，可以隨便命名-->
Vue.filter('formatDate',function(v){
return fmtDate(v,'yyyy-MM-dd');
});
var vue=new Vue({
el:'#div3',
data:{
time:new Date(),
card:'4306xxxxxxxxxxxxxx'
},
filters:{
cardNum:function(v){
return v.substr(0,6)+'XXXXXXXX'+v.substr(14,19);
}
}
})
</script>
</body>
</html>
附date.js
//給Date類添加了一個新的實例方法format
Date.prototype.format = function (fmt) {
//debugger;
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小時
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
function fmtDate(date, pattern) {
var ts = date.getTime();
var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
if (pattern) {
d = new Date(ts).format(pattern);
}
return d.toLocaleString();
};
Vue的計算屬性和監控屬性
<body>
<div id="div_1">
<h2>計算屬性</h2>
<div v-for="rs in result">
{{rs.name}}<input v-bind:value="rs.shu" type="text"/>
</div>
<!--計算所有科目的總和-->
{{sum}}
<h2>監聽屬性</h2>
<div>
<!--KM的改變，M也會改變-->
KM:<input type="text" v-model="km"/></br>
M:<input type="text" v-model="m"/>
</div>
</div>
<script>
var vue=new Vue({
el:'#div_1',
data:{
result:[
{name:'java',shu:100},
{name:'C#',shu:100},
{name:'python',shu:100},
{name:'mysql',shu:100},
],
km:1,
m:1000
},
computed:{
sum:function(){
let s=0;
for(var i=0;i<this.result.length;i++){
s+=this.result[i].shu;
}
return s;
}
},
<!--監聽-->
watch:{
km:function(v){
this.m=parseInt(v)*1000;
},
m:function(v){
this.km=parseInt(v)/1000;
}
}
})
</script>
</body>