vue(二)vue常見指令+事件
阿新 • • 發佈：2018-12-11
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hello</title> </head> <body> <div id="app"> <input type="text" v-model="msg"><br/> {{msg}} <div v-text="msg"></div> <div v-once> {{msg}}----{{msg}} </div> <div v-html="p"></div> {{arr}} <div> <ul> <li v-for="item in fruits"> {{item.name}} </li> </ul> </div> <div> <ul> <li v-for="(item,index) in fruits"> {{item.name}}{{index+1}} </li> </ul> </div> <div> <ul> <li v-for="(item,index) in fruits"> {{index+1}}.{{item.name}} <ul> <li v-for="(c,childIndex) in item.color"> {{index+1}}.{{childIndex+1}}.{{c}} </li> </ul> </li> </ul> </div> <div v-for="(value,key,index) in obj">{{key}}:{{value}}:{{index}}</div> </div> <!-- <script src="node_modules\vue\dist\vue.js"></script> --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { msg: '123', p:'<h1>aaa</h1>', arr:[1,2,3,4,5], fruits:[ {name: '香蕉' , color: ['green','yellow']}, {name: '蘋果' , color: ['red','green', 'yellow']}, {name: '西瓜' , color: ['pink']} ], obj:{name:'huang',age:24,address:'xxx'} } }); // vm.arr.reverse(); vm.arr=vm.arr.map(item=>item*3); </script> </body> </html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<div v-on:mousedown="fn">點我啊</div>
<div @mousedown="fn">v-on 等價於 @</div>
<div @mousedown="fn($event)">呼叫不要加(),如果加了，必須寫成($event)</div>
</div>
<!-- <script src="node_modules\vue\dist\vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/