vue的v-html,v-text指令,以及按键修饰符和事件修饰符的运用

30 篇文章 0 订阅
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
     <div id="app">
   <p> {{ message }} </p>
   <p v-text="info"></p>
   <p v-html="info"></p>
   <p>{{ info }}</p>

     <input type="button" @click="aa" value="按钮1">
     <input type="button" @click="bb(100,$event)" value="按钮2">
     <a href="https:\\www.baidu.com" @click.prevent="dd" rel="123"> 跳转到百度</a>
     <div style="margin:10px;width: 100px;height: 100px;background-color: #dedede;" @click="ff">
    <input type="button" @click.stop="gg" value="按钮3">
    </div>
  输入框:  <input type="text" name="" id="" @keyup.esc="clearInput" @keyup.enter="submitAjax">
     </div>
<script>
 
 const app =new Vue ({
  el:"#app",
  data:{
      message:"Hello Vue!",
      info:"<h4 style='color:red;font-weight:bold;font-size:16px'> 欢迎大家学习vue  </h4> ",
  },
  methods:{
      aa(e){
          // 点击按钮 修改按钮的属性和值
          e.target.style.backgroundColor="red";
          e.target.value=Math.random();
      },
      bb(a,e){
           // 传参数a 点击按钮 修改按钮的属性 和值
        e.target.style.backgroundColor="blue";
        e.target.value=a+Math.random();
      },
      dd(e){
          // 事件修饰符  如果不加 直接会跳转到百度 加了就不会跳转  @click.prevent="dd" 

            console.log(e.target.rel) //获取 rel属性的值 
            console.log(e.target.href) //获取 href 属性的值 
            console.log(e.target.text) //获取 text 属性的值 
            console.log("你点击了a标签")
      },
      ff(){
          console.log("你点击了父div"+Math.random())
      },
      gg(){
          //事件修饰符 如果不加 点击了按钮 就会触发了div的点击事件 加了就不会影响  @click.stop="gg"
          console.log("你点击了子按钮"+Math.random());
      },
      clearInput(e){
          // 按键修饰符  触发了 Esc 键  清除input输入框的值 
          e.target.value='';
          console.log(' 按键修饰符  触发了 Esc 键  清除input输入框的值 ')
      },
      submitAjax(e){
        // 按键修饰符  触发了 Enter 键  可以提交数据 
        e.target.value="数据正在提交到后台...."
        console.log('按 Enter 键提交')

      }

  }

 })


</script>
</body>
</html>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值