Vue框架入门到实践(四)

最新推荐文章于 2024-02-15 07:00:00 发布

seperinna

最新推荐文章于 2024-02-15 07:00:00 发布

阅读量127

点赞数

分类专栏：前端开发文章标签： vue

本文链接：https://blog.csdn.net/u010108076/article/details/108287354

版权

前端开发专栏收录该内容

26 篇文章 0 订阅

订阅专栏

绑定

事件绑定(v-on)

<div id="btn">
<button v-on:click="counter += 1">点击计算{{counter}}</button>
<button  v-on:click="greet('test', $event)">点击弹出</button>
</div>
<script type="text/javascript">
var app = new Vue({
	el : "#btn",
	data: {
		counter:1
	},
	methods:{
		greet:function(str, e){
			alert(str);
			console.log(e);
		}
	}

});
</script>

表单输入绑定 (v-model)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <script type="text/javascript" src="vue.js"></script>
  <title></title>
 </head>
 <body>
  <div id="btn">
   <input v-model="message" placeholder="edit me"/>
   <p>{{message}}</p>
   <textarea v-model="newMessage" placeholder="add multiple me"></textarea>
   <p>{{newMessage}}</p>
   <input type="checkbox" id="apple" value="apple" v-model="checkedNames" />
   <label for="apple">apple</label>
   <input type="checkbox" id="orange" value="orange" v-model="checkedNames" />
   <label for="orange">orange</label>
   <input type="checkbox" id="pear" value="pear" v-model="checkedNames" />
   <label for="pear">pear</label>
   <input type="radio" id="yes" value="yes" v-model="picked" />
   <label for="yes">yes</label>
   <input type="radio" id="no" value="no" v-model="picked" />
   <label for="no">no</label>
  <button  v-on:click="counter += 1">点击计算</button>
  <span>{{counter}}</span>
  <button  v-on:click="submit">点击弹出</button>
  </div>
  <script type="text/javascript">
  var vm = new Vue({
   el : "#btn",
   data: {
    counter:1,
    message:"default name",
    newMessage:"hello world",
    checkedNames:['apple'],
    picked:"yes"
   },
   methods:{
    submit:function(){
     var contentObj = {
      msg : this.message,
      msg2 : this.newMessage,
      checked : this.checkedNames,
      picked : this.picked
     }
     console.log(contentObj);
    }
   }
  
  });
  </script>
 </body>
</html>

seperinna

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架入门到实践(四)

绑定事件绑定(v-on)<div id="btn"><button v-on:click="counter += 1">点击计算{{counter}}</button><button v-on:click="greet('test', $event)">点击弹出</button></div><script type="text/javascript">var app = new Vue({ el :
复制链接

扫一扫