Vue基础语法

Vue基础语法

判断

if循环
<div id="app">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        //Model: 数据
        data: {
            ok: "true"
        }
    });
</script>

if-else-if循环
<!--view层 模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>C</h1>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        //Model: 数据
        data: {
            type: "A"
        }
    });
</script>

for循环

for循环
<!--view层 模板-->
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        //Model: 数据
        data: {
            items: [
                {message: 'java'},
                {message: '前端'},
                {message: '运维'}
            ]
        }
    });
</script>

事件

Vue事件
<!--view层 模板-->
<div id="app">
    <button v-on:click="sayHi">点击</button>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    let vm = new Vue({s
        el: "#app",
        //Model: 数据
        data: {
            message: "java"
        },
        methods: {//方法必须定义在vue的method对象中，v-on：事件
            sayHi: function () {
                alert(this.message);
            }
        }
    });
</script>

<!--view层 模板-->
<div id="app">
    请输入：<input type="text" v-model="message">{{message}}
    
    请输入：<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>{{message}}
    
    请选择：
    <input type="radio" name="sex" value="男" v-model="sex">男
    <input type="radio" name="sex" value="女" v-model="sex">女
    <p>
        选中了：{{sex}}
    </p>

    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <p>
        选中的：{{selected}}
    </p>
    
    
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "",
            sex: "",
            selected: ""
        }
    });
</script>

<!--view层 模板-->
<div id="app">
    
    <!--组件-->
    <wancheng v-for="item in items" v-bind:wan="item"></wancheng>
    
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    
    //定义一个Vue组件component
    Vue.component("wancheng",{
        props: ['wan'],
        template: "<li>{{wan}}</li>"
            
    });
    
    let vm = new Vue({
        el: "#app",
        data: {
            items: ["java","linux","前端"]
        }
    });
</script>