zoukankan      html  css  js  c++  java
  • Vue:v-on、v-bind、v-model、v-text、v-html用法

    1、v-on:用于绑定HTML事件

    • v-on,用于事件(如click)的监听绑定,比如下图,意思是,为当前button绑定监听器,点击则调用sendBack1方法;v-on也可简写为@
      示例:例如我们在HTML的body中加入一个绑定了事件的button
    <div id="app">
        <button v-on:click="onClick">点击这里</button>
    </div>
    

    在js的methods中加入一个onClick事件:

    <script>
    var app = new Vue({
      el : '#app',
      methods : {
        onClick : function(){
          console.log("clicked");
        }
      }
    })
    </script>
    

    2、v-bind:用于设置HTML属性

    <div id="app">
      <!--  全称-->
      <a v-bind:href="url">百度</a>
      <!--  简写-->
      <a :href="url">百度</a>
    </div>
    

    在js的data中赋值url:

    <script>
    var app = new Vue({
      el : '#app',
      data: {
        url:"www.baidu.com"
      }
    })
    </script>
    

    3、v-model:在表单控件元素上创建双向数据绑定

    <div class="app">
      <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
      <label for="jack">jack</label>
      <input type="checkbox" id="John" value="John"  v-model="checkedNames">
      <label for="jack">John</label>
      <input type="checkbox" id="Mike" value="Mike"  v-model="checkedNames">
      <label for="jack">Mike</label>
      <br>
      <span>Checked names:{{checkedNames}}</span>
    </div>
    

    在js的data中赋值checkedNames:

    <script>
    new Vue({
      el:'.app',
      data:{
        checkedNames:[]
      }
    })
    </script>
    

    4、v-text会覆盖元素中原本的内容,但是 插值表达式 只会替换自己的这个占位符,不会把 整个元素的内容清空,只显示文本不显示标签

    <body>
        <div id="app">
        	<p>{{msg1}}</p>
            <p v-text="msg1"></p>
            <p v-text="msg2"></p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg1: "这是对应的值",
                    msg2: "<h1>这是对应的值</h1>"
                },
                methods: {}
            });
        </script>
    </body>
    

    5、v-html同样是用来显示data中属性的属性值的(数据绑定),此指令不仅可以显示文本内容,还可以显示带标签的内容

    <body>
        <div id="app">
        	<p>{{msg1}}</p>
            <p v-html="msg1"></p>
            <p v-html="msg2"></p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg1: "这是对应的值",
                    msg2: "<h1>这是对应的值</h1>"
                },
                methods: {}
            });
        </script>
    </body>
    
  • 相关阅读:
    Vmware安装Ubuntu ==> 连网成功
    在 ns3.25中添加 plc(电力线载波) 模块
    Ubuntu12.04下安ns3.29及Ubuntu换源方法
    微信支付小程序版
    微信小程序打开外部链接
    linux下安装Mongodb
    延迟执行+异步 之代码分析1
    Vue入门
    实验一
    实验二
  • 原文地址:https://www.cnblogs.com/hghua/p/13232137.html
Copyright © 2011-2022 走看看