Vue基本赋值绑定操作

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>&lt...

小仓桑

4599人浏览 · 2019-11-04 09:08:26

小仓桑 · 2019-11-04 09:08:26 发布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--参数绑定-->
			<h1>{{name}}</h1>
			<!--方法绑定-->
			<h1>{{greet('night')}}</h1>
			<!--链接绑定-->
			<a v-bind:href="website">web开发</a>
			<!--value绑定-->
			<input type="text" v-bind:value="name" />
			<!--对属性绑定对应的值-->
			<p v-html="websiteTag"></p>
			<p>{{[1,2,3,4][1]}}</p>
            <p>{{ {name:"老赵"}.name }}</p>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
//		选择id
		el:"#app",
//		赋值操作
		data:{
			name:"老赵",
			job:"web开发",
			website:"www.baidu.com",
			websiteTag:"<a href='www.baidu.com'>百度一下，你就知道</a>"
		},
//		方法
		methods:{
			greet:function(time){
				return 'Good'+time+""+this.name+"!";
			}
		}
	})
</script>

结果：

简单的案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>Events</h1>
			<button v-on:click="add(1)">涨一岁</button>
			<button v-on:click="substract(1)">降一岁</button>
			<button @click="add(10)">涨十岁</button>
			<button v-on:click="substract(10)">降十岁</button>
			<p>我的年龄为：{{age}}</p>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			name:"老赵",
			age:30,
		},
		methods:{
			add:function(inc){
				this.age+=inc;
				if(this.age==100){
					alert("太大了！！！") ;
				}
			},
			substract:function(dec){
				this.age-=dec;
				if (this.age<0) {
					alert("太小了！！！") ;
				}
			}
		}
	})
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--v-text指令作用是:设置标签的内容-->
			<h2 v-text="message+'嘻嘻'"></h2>
			<h2>{{info}}</h2>
			<!--v-text指令作用是:设置元素的innerHtml
			内容有HTML结构会被解析为标签-->
			<h2 v-html="content"></h2>
			<input type="button" value="事件绑定" @click="dolt" />
			<input type="button" value="事件绑定2" v-on:click="dolt" />
			<div style="height: 100px; width: 100px; background: red;" id="b"></div>
		</div>
	</body>
</html>
<script type="application/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			message:"程序员",
			info:"前端程序员",
			content:"<a href='https://www.baidu.com'>这是一个v-html百度链接</a>"
		},
		methods:{
			dolt:function(){
				document.getElementById("b").style.background="yellow" ;
			}
		}
	})
</script>

效果图：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^