vue表达式-数据绑定-事件绑定

weblog 1953 0 0
vue表达式-数据绑定-事件绑定 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://vuejs.org/js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>表达式</h1>
			<input type="text" v-model="msg" />
			<p>{{msg}}</p>
			<p>{{msg.toUpperCase()}}</p><!--表达式-->
			<p v-text="msg"> </p><!--textContent-->
			<p v-html="msg"> </p><!--innerHtml-->
			
			<h1>指令1 强制数据绑定</h1>
			<img v-bind:src="imgUrl" />
			<img :src="imgUrl" />
			
			<h1>指令2 事件绑定</h1>
			<button v-on:click="click">事件绑定</button>
			<button @click="click">事件绑定2</button>
			<button @click="click2(msg)">事件绑定3</button><!--直接使用数据模型中的数据-->
			
		</div>
		<script type="application/javascript">
			var v=new Vue({
				el:'#app',
				data:{
					msg:"<a href='www.jiajiajia.club'>hello</a>",
					imgUrl:"http://photo.jiajiajia.club/weblog/2019_06_12/data.png"
				},
				methods:{
					click(){
						console.log("test");
					},
					click2(test){
						console.log(test);
					}
				}
			})
		</script>
	</body>
</html>

 


猜你喜欢
weblog 2300 vue使用v-model(双向)自动收集!DOCTYPEhtmlhtml head metacharset="UTF-8" title/title scriptsrc="js
weblog 2057 vueclass和style!DOCTYPEhtmlhtml head metacharset="UTF-8" title/title scriptsrc="js/vue.min.js
weblog 1778 layuitable格单选监听以及选中获取格设置table.render({ elem:'#test' ,url:'[[@{/smmc/artificial}]]'+'?xsId
其他 2388 的声明和例子usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text
java 数据库 2609 的规则使用了springboot中的Cron,如图2。图1图2来源库sql中,如果两个库的字段不一样,应该用库中的as关键字使来原库查询返回的列和目标库的字段相同。
weblog 2412 义一个插.js(function(){ //需要向外暴露的插对象 constMyPlugin={}; MyPlugin.install=function(Vue,options){ //1
数据结构与算法 1603 :ab+ab-*高级语言中采用自然语言的中缀,但是计算机对中缀的处理是非常困难的,而对后缀或前缀则显得非常简单后缀的特点: 1.在后缀中,变量(操作)出现的顺序与中
weblog 2090 java正则只能输入6-20位字或字母[a-zA-Z0-9]{6,20}$
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。