028-86261949

当前位置:首页 > 技术交流 > vue-指令学习(下)

vue-指令学习(下)

2019/08/28 16:36 分类: 技术交流 浏览:0

v-model

  • 主要是用于完成双向的绑定
  • 只能用于:input,select,textarea
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script></head><body>
<div id="app">
 
    名称:<input type="text" v-model="inputVal"> <br>
    {{inputVal}}
    <hr>
        爱好:
        <input v-model="checkboxVal" value="1" type="checkbox">看电影
        <input v-model="checkboxVal" value="2" type="checkbox">看小说
        <input v-model="checkboxVal" value="3" type="checkbox">看漫画
        <input v-model="checkboxVal" value="4" type="checkbox">垃圾
        <br>
        {{checkboxVal}}
    <hr>
        性别:
        <input v-model="radioVal" value="1" type="radio">
        <input v-model="radioVal" value="2" type="radio">
        <input v-model="radioVal" value="3" type="radio">叨客
        <br>
        {{radioVal}}
    <hr>
        <select v-model="selectVal">
            <option value="1">中国</option>
            <option value="2">日本</option>
            <option value="3">美国</option>
        </select>
        <br>
        {{selectVal}}
    <hr>
        <textarea v-model="textareaVal"></textarea>
        <br>
        {{textareaVal}}</div>
<script>
 
    /**
     * v-model:只能在表单标签中使用(input,select,textarea)
     */
    new Vue({
        el: "#app",
        data: {
            inputVal:"我是杨杨我怕谁!",
            checkboxVal:["1","3"],
            radioVal:2,
            selectVal:2,
            textareaVal:"sdfsfd"
        }
    })
</script>
</body></html>

v-show&v-if

  • v-show用于展示和隐藏 <标签 v-show="true/false">
  • v-if <标签 v-if="条件">...
  • show只是隐藏标签,if直接就不会出现不满足条件的标签

v-show的案例代表

  • 最后的效果是有一个按钮,点一下显示图片,再点一下隐藏图片
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script></head><body>
<div id="app">
 
    <button onclick="showyishow()" >点我啊</button> <br />
    <!--
        v-show:true(显示)/fales(不显示)
            :不显示(style="display: none;"
    -->
    <img src="imgs/1.jpg" v-show="isShow" />
</div>
<script>
 
    /**
     * v-model:只能在表单标签中使用(input,select,textarea)
     */
    var vue = new Vue({
        el: "#app",
        data: {
            isShow:false
        }
    })
    
    function showyishow() {
        vue.isShow = !vue.isShow;
    }
</script>
</body></html>

v-if的案例

<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script></head><body>
<div id="app">
 
    <!--
        if:如果未满足条件,页面就直接 没有这元素
            show:元素存在,只在隐藏起来了
    -->
    <div v-if="age<18">
        未成年人禁止入内
    </div>
    <div v-else-if="age>=18 && age<60">
        客观请进,这里欢迎您
    </div>
    <div v-else>
        老神仙,不食人间烟火
    </div>
 
</div>
<script>
 
    /**
     * v-model:只能在表单标签中使用(input,select,textarea)
     */
    var vue = new Vue({
        el: "#app",
        data: {
            age:10
        }
    })
    // alert(0)
    // vue.age = 89;
    
</script>
</body></html>

v-on 事件绑定

  • 事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
  • 调用的方法可以不加()
  • v-on有一种简写形式 <标签 @事件名=方法名>
<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script></head><body>
<div id="app">
 
    <!--
        这里的方法加不加括号都可以执行
        v-on:事件名="方法名()"
        @事件名="方法名()"
    -->
    <button v-on:click="say()">点我有惊喜...</button>
 
    <button @click="hello('风语咒')">再点我啊!!!</button>
 
    <button @click="age++">{{age}}</button>
</div>
<script>
 
    var vue = new Vue({
        el: "#app",
        data: {
            name:"小明",
            age:12
        },
        methods:{
            say(){
                alert("点啊,你个瓜娃子!")
            },
            hello(msg){
                console.debug(this.name+"出来看:"+msg);
            }
        }
    })
 
</script>
</body></html>

 

#标签:vue,指令学习