vue实训第一天

最新推荐文章于 2024-05-30 16:24:17 发布

weixin_45673167

最新推荐文章于 2024-05-30 16:24:17 发布

阅读量405

点赞数 1

本文链接：https://blog.csdn.net/weixin_45673167/article/details/102925325

版权

1.v-text插值表达式是将m中内容以文本格式写入到vm中，而v-html插值表达式是将m中内容以HTML代码格式渲染到vm中。（相同点是都为覆盖写入）
2.代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第二题</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-text="msg"></p>
			<p v-html="msg2"></p>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'hello',
					msg2:'<h2>helloworld</h2>'
				}
			 });
		</script>
	</body>
</html>

3.VM MV模式是 Model-View-ViewModel的简写，是视图，数据，监视者三者组合起来的一种设计模式，优势是View和Model的双向绑定（当View有用户输入后，ViewModel通知Model更新数据，同理Model数据更新后，ViewModel通知View更新）和可测试性，可重用性。
4.代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>cat</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>姓名:{{cat.name}}</h2>
			<h2>年龄:{{cat.age}}</h2>
			<h2>描述:{{cat.desc}}</h2>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					cat:{
						name:'罗小黑',
						age:8,
						desc:'是一只黑色的小猫'
					}
				}
			 });
		</script>
	</body>
</html>

5.代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算功能</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="a">
			<select name="" id="" v-model="c">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model="b">
			<input type="button" value="计算" @click="calculate">
			<input type="text" v-bind:value="result">
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					a:'',//第一个操作符
					b:'',//第二个操作符
					c:'',//第三个操作符
					result:''
				},
				methods:{
					calculate(){
						if(this.c=='+'){
							this.result=parseInt(this.a)+parseInt(this.b);
						}
						if(this.c=='-'){
							this.result=parseInt(this.a)-parseInt(this.b);
						}
						if(this.c=='*'){
							this.result=parseInt(this.a)*parseInt(this.b);
						}
						if(this.c=='/'){
							this.result=parseInt(this.a)/parseInt(this.b);
						}
					}
				}
			});
		</script>
	</body>
</html>

weixin_45673167

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实训第一天

1.v-text插值表达式是将m中内容以文本格式写入到vm中，而v-html插值表达式是将m中内容以HTML代码格式渲染到vm中。（相同点是都为覆盖写入）2.代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>第二题</title> ...
复制链接

扫一扫