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>

Vue:v-on、v-bind、v-model、v-text、v-html用法

上一篇:python2.7中MySQLdb的安装与使用详解


下一篇:[问题解决]gradle编译失败系统找不到指定的文件