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