vue教程3:vue常用指令

v-text

  • 作用:渲染文本到标签上,跟JQuery的text()方法类似
  • 直接上例子:
<script>
    var app = new Vue({
        el: "#app",
        data:{
            name:"张三先生",
            age: 30
        }
    });
</script>
<div id="app">
 	<h4>{{name}}</h4>
    <h4 v-text="name"></h4>
    <h4 v-text="name+',你好!'"></h4>
</div>

结果如下:
在这里插入图片描述

v-html

  • 作用:渲染html代码到标签内容,跟JQuery的html()方法类似
var app = new Vue({
    el: "#app",
    data:{
        name:"<span style='color:red;'>张三先生</span>"
    }
});
<div id="app">
    <p v-html="name"></p>
</div>

运行后就会输出红色字体的张三先生,这里就不贴图了


v-on

  • 作用:绑定dom元素各种事件,例如点击、双击等等。事件方法写在methods对象内部。
  • 传参:vue的事件不需要传递参数,直接在事件内部操作data对象就行了
  • v-on事件可以简写为@
<div id="app">
 	<input type="button" value="提示" v-on:click="test" />
    <input type="button" value="简写" @click="test" />
    <p>
        {{message}}
        <input type="button" value="点击改变内容" @click="changeData" />
    </p>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message:"今天天气不错"
        },
        methods:{
            test:function(){
                alert("这是一个提示信息!");
            },
            changeData:function(){
                this.message = "突然就下雨了";
            }
        }
    });
</script>

v-show

  • 作用:根据表达式的返回值true/false,控制元素的显示和隐藏
  • 原理:通过设置css的display属性来切换显示、隐藏
    <div id="app">
        <input type="button" value="切换" @click="change" /> <br />
        <img src="https://cn.vuejs.org/images/logo.png" v-show="isShow" />
    </div>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            isShow: true
        },
        methods:{
            change:function(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>

v-if

  • 作用:和v-show一样,根据表达式的返回值true/false,控制元素的显示和隐藏
  • 原理:通过操作dom的添加、移除来控制显示状态,注意当隐藏时整个dom元素都会被删除,这点和v-show是不同的。

v-bind

  • 作用:为元素绑定属性值,例如src、title、class
  • 写法是v-bind:属性名="",可以简写为 :属性名=""
    <div id="app">
        <!--以下2种写法作用相同-->
        <p v-bind:class="isActive ? 'active' : ''">这是一段文本</p>
        <p v-bind:class="{active: isActive}">这是一段文本</p>
        <input type="button" value="切换样式" @click="changeRed" />
    </div>
    <style>
        .active {
            color:red;
        }
    </style>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            isActive: false
        },
        methods:{
            changeRed:function(){
                this.isActive = !this.isActive;
            }
        }
    });
</script>

v-for

  • 作用:遍历数组生成对用的dom,比如用于ul-li生成、table-row生成
    <div id="app">
        <input type="button" value="增加" @click="add"> <br/>
        <ul>
            <li v-for="(item, index) in userList" :key="index">
                {{index}}:{{item.name}}
            </li>
        </ul>
    </div>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            userList:[
                { name: "张三" },
                { name: "李四" },
                { name: "王五" }
            ]
        },
        methods:{
            add:function(){
                this.userList.push({ name: "宋六" });
            }
        }
    });
</script>

v-model

  • 作用:表单元素数据的绑定,注意这是双向绑定。意思就是,表单控件值变了,则绑定的对象也会跟着变化;如果通过代码修改了对象值,则控件值也会同步变化。
  • v-model是vue业务开发的核心,涉及到页面提交的都会用到
	<!--效果,文本框输入值变化,下面h4内容跟着变-->
    <div id="app">
        <input type="text" v-model="message" />
        <h4>{{message}}</h4>
    </div>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message: "今天天气真好"
        }
    });
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

°Fuhb

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值