vue十大常见指令（下）

最新推荐文章于 2024-07-09 00:17:48 发布

Hi毛哥哥

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/maolian1995/article/details/78981761

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
ul,ol{
list-style: none;
}
</style>
</head>
<body>
<div id="app">
数组遍历
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>

对象遍历
<ul>
<li v-for="user in users">
{{user._id}}
</li>
</ul>
v-for 指令常用于渲染数据,除了可以迭代数组，还可以迭代对象和整数。
<br>
................................................↓................................................
<br /><br />
<a v-bind:href='link' v-bind:target="target">Hello Vue</a>
<br />
      ↓  等价于
<br />
<a :href='link' :target="target">Hello Vue</a> <br /><br />
v-bind 指令用于动态绑定DOM元素的属性,v-bind 指令可以简写成一个冒号":"。
<br>
................................................↓................................................
<br /><br />
<button v-on:click="say">点击</button>
<br />
      ↓  等价于
<br />
<button @click="say('毛大爷')">点击</button> <br /><br />
v-on 指令相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数 v-on 指令可以简写成 "@"。
<br>
................................................↓................................................
<br /><br />
<input type="text" v-model='msg'/>
{{msg}} <br /><br />
v-model 指令指定关联的数据,同步更新。
<br>
................................................↓................................................
<br /><br />

<input type="text" v-model='msg'/>
<p v-once>你输入：{{ msg }}</p>
</div>

<script>
new Vue({
data:{
arr:['apple','pear','orange'],
users:[
{ "_id": "5a1d276e421aa90fe7253676",
"createdAt": "2017-11-28T17:07:58.240Z",
"desc": "业界首创Android Lint增量扫描实战纪要",
"publishedAt": "2017-12-06T08:49:34.303Z",
"source": "web",
"type": "Android",
"url": "http://www.jianshu.com/p/4833a79e9396",
"used": true,
"who": null
},
],
link:'http://cn.vuejs.org',
target:"_blank",
msg:'毛大爷'
},
methods:{
say:function(name){
alert(name)
}
}
}).$mount('#app')
</script>
</body>
</html>