Blogger Information
Blog 14
fans 1
comment 0
visits 4532
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
​Vue常用指令及其术语
叫我孙大树
Original
320 people have browsed it
Vue常用指令及其术语
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>0804作业</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <div class="1">{{a}}</div>
    <div>
        <text v-on:copy="bbbbb">今天天气{{weather}}</text>
<!--        <input placeholder="修改天气" v-model.lazy="weather">-->
        <input placeholder="修改天气" @focusout="www" ref="valuehhhhh">
    </div>
    <hr>
    <div v-if="mess != ''">我是双向绑定的div,数据是“{{mess}}”</div>
    <div v-else>目前还没有数据哦,请在下面填写吧~</div>
    <input   v-model="mess" placeholder="快来写快来写">
    <div >{{mess}}</div>

</div>
</body>
<script>
    //常用vue指令

    //创建vue实例并挂载到相应的文档位置中
    let a = 'test'
    let weather = '晴'
    let mess = ''
    Vue.createApp({
        data() {
            return {
                a,
                weather,
                mess,
            }
        },
        methods: {
            bbbbb(rr) {
                console.log(rr)
                console.log(window.getSelection().toString())
                let copyV = window.getSelection().toString()
                alert(`已经捕获的复制行为,内容是“${copyV}”`)
            },

            www(){
                // this.$data.weather = this.valueW

                // console.log(this.$refs.valuehhhhh.value)
                this.weather = this.$refs.valuehhhhh.value
            }
        }

    }).mount(document.getElementById('app'))


</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments