vue常用指令（上）

1.v-text指令

• v-text的作用：设置标签内容（textContent）
• 默认写法替换全部内容，差值表达式{{}}替换指定内容

  <div id="app">
    <h2 v-text="message+'222'"></h2>
    <h2 v-text="info"></h2>
    <h2>{{message+'1'}}</h2>
   </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   

    <script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello vue!",
            info:"前端"
        }

    })
    </script>

页面显示内容：

2.v-html指令

• v-html作用：设置元素的innerHTML
• 内容中有HTML结构会被解析为标签

  <div id="app">
    <h2 v-html="content"></h2>
    <h2 v-text="content"></h2>
   </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   

    <script>
    var app = new Vue({
        el:"#app",
        data:{
            content:"<a href='http://www.baidu.com'>百度</a>"
        }
    })
    </script>

页面显示内容：

3.v-on

• v-on作用：为元素绑定事件
• “v-on:”可以用“@”替代
• 绑定的方法定义在methods属性中
• 方法内部通过this访问data中的数据

<div id="app">
    <input type="button" value="点击" @click="doIt" >
    <input type="button" value="双击" @dblclick="doIt">
    <h2 @click="changeFood">{{food}}</h2>
 </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   

    <script>
    var app = new Vue({
        el:"#app",
        data:{
            food:"西蓝花"
        },
        methods:{
            doIt:function(){
                alert("做IT");
            },
            changeFood:function(){
                //console.log(this.food);
                this.food+="好好吃！"
            }
        }
    })
    </script>

4案例：计数器

 <div id="app">
    
    <button @click="sub">-</button>
    <span>{{num}}</span>
    <button @click="add">+</button>
    
 </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   

    <script>
    var app = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
           sub:function(){
                if(this.num==0){
                    alert("不能再小了");
                }else{
                    this.num--;
                }
           },
           add:function(){
                if(this.num==10){
                    alert("不能再大了");
                }else{
                    this.num++;
                }
           }
        }
    })
    </script>

来源：CSDN

作者：Joker_Lie

链接：https://blog.csdn.net/Joker_Lie/article/details/104106179