【Vue】指令之内容绑定，事件绑定

内容绑定，事件绑定

v-test指令

作用：设置标签的文本值（textContent）

• 默认写法会替换全部内容，使用差值表达式可以替换指定内容
• 内部支持写表达式

 <div id="app">
        <h2 v-text="message+'!'">标签原文本值</h2>
        <h2>{
  { message +'!'}}标签原文本值</h2>
 </div>

 <script>
        var app = new Vue({
     
            el:"#app",
            data:{
     
                message:"设置标签的文本值",
            }
        })
</script>

运行结果：

v-html指令

作用：设置标签的innerHTML

• 内容中有html结构会被解析为标签

v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html

<div id="app">
      <p v-html="content"></p>
 </div> 
   
 <script>
      var app = new Vue({
     
        	el:"#app",
            data:{
     
                content:"<span>标签内容</span>"
            }
        })
 </script>

v-on基础

作用：为元素绑定事件

• 事件名不需要写on
• 指令可以简写为on
• 绑定的方法定义在methods属性中
• 方法内部通过this关键字可以访问定义在data中数据

<div id="app">
      <input type="button" value="点击" @click="doIt(666,'老铁')">
      <input type="text" @keyup.enter="sayHi">
</div>
 
<script>
        var app = new Vue({
     
            el:"#app",
            methods: {
     
                doIt:function(p1,p2){
     
                    console.log("做it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
     
                    alert("吃了没");
                }
            },
        })
</script>