<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue框架学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.js"></script>
<link rel="stylesheet" href="../css/bootstrap.css" />
<script type="text/javascript">
</script>
</head>
<body>
<div id="div1">
{{name}} <!--文本信息-->
<span>{{age}}</span> <!--文本信息-->
<p v-html="info"></p> <!--html信息-->
<!--<h2>{{handleClick()}}</h2> --><!--调用函数-->
<p v-if="isShow">动态创建和删除</p> <!--满足即创建，不满足则删除-->
<p v-show="isShow">动态隐藏和显示</p> <!--满足即显示，不满足则隐藏(未删除)-->
<button class="btn-success">按钮1</button>
<!--给按钮绑定事件，添加class样式--> <!--v-on:click 可简写@click v-bind:class 可简写 :class -->
<button v-on:click="handleClick" v-bind:class="isShow?'btn-success':'btn-danger'">按钮2</button>
<p>{{computedNum}}</p> <!--计算属性-->
</div>
<div id="div2">
<!--vue双向数据绑定-->
<p>单价：<input type="text" v-model="price"/></p>
<button v-on:click="add">增加</button>
{{price}}
<p>数量：<input type="text" v-model="number"/></p>{{number}}
<p>总价：<span>{{sum}}</span></p>
</div>
<script>
var vm=new Vue({
el:"#div1",//绑定id对象
data:{//定义属性对象
name:"陈同学",
age:21,
info:"<b>哈哈哈</b>",
isShow:false
},
methods:{//定义函数，可传参
// handleClick(){//简写函数
handleClick:function(){
alert("点击按钮");
this.isShow=!this.isShow;
return "函数返回值";
}
},
computed:{//计算属性，不可传参，基于依赖可将数据进行缓存，只有在依赖改变的时候才更新数据，相比于普通方法，优化性能
computedNum:function(){
return "计算属性";
}
}
});
var vm2=new Vue({
el:"#div2",//绑定id对象
data:{
price:100,
number:"",
sum:0
},
methods:{
add(){
this.price++;
}
},
watch:{//监听属性的改变
price:function(newValue){//函数名要与属性相对于才能监听，newValue为新的值
this.sum=newValue*this.number;
},
number:function(newValue){//函数名要与属性相对于才能监听，newValue为新的值
this.sum=newValue*this.price;
}
}
});
</script>
</body>
</html>
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
