文件
专题 ·
最新
首页
  • 我的主页卡化石
  • off中心
  • 基本设置
  • 文件上传

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

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