vue基础二

最新推荐文章于 2024-06-05 15:34:40 发布

dream_of_forget

最新推荐文章于 2024-06-05 15:34:40 发布

阅读量532

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/dream_of_forget/article/details/126910034

版权

v-model修饰符

v-model.lazy : 在change时触发而非inupt时（失去焦点或enter键的时候才会绑定数据）

v-model.number : 输入字符串转为有效的数字 (有效：能转数字就转,不能转就不转)

v-model.trim : 去掉字符串首尾空格

<body>

    <!-- HTML结构 -->
    <div id="app">
        <input type="text" v-model.lazy="name" placeholder="请输入姓名"><br>
        <p>您的姓名是:{
  { name }}</p><hr>
        <input type="text" v-model.number="age" placeholder="请输入年龄"><br>
        <p>您的年龄是:{
  { age }}</p><hr>
        <input type="text" v-model.trim="score" placeholder="请输入分数">
        <p>您的分数是:{
  { score }}</p><hr>
    </div>
    <!-- 
        1.学习目标： v-model修饰符用法
        2.语法
            v-model.lazy : 在change时触发而非inupt时（失去焦点或enter键的时候才会绑定数据）
            v-model.number : 输入字符串转为有效的数字 (有效：能转数字就转,不能转就不转)
            v-model.trim : 去掉字符串首尾空格

     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                name: '',
                age: '',
                score: '',
            }
        })
    </script>
</body>

v-model绑定其他表单元素

1.默认情况下, v-model指令绑定的是表单元素的value值 (复选框checkbox除外)

2.如果遇到复选框checkbox

非数组 : 一般用于单个复选框,此时绑定的是checked属性

数组 : 一般用于多个复选框，此时绑定的是value属性

<body>

    <!-- HTML结构 -->
    <div id="app">
        <h2>性别</h2>
        <input type="radio" value="男" name="sex" v-model="sex">男
        <input type="radio" value="女" name="sex" v-model="sex">女
        <h2>爱好</h2>
        <input type="checkbox" value="学习" v-model="goods">学习
        <input type="checkbox" value="上课"  v-model="goods">上课
        <input type="checkbox" value="敲代码" v-model="goods">敲代码
        <input type="checkbox" value="打游戏" v-model="goods">打游戏
        <h2>学科</h2>
        <select name="" id="" value="学科" v-model="subject">
            <option value="">请选择学科</option>
            <option value="1">前端</option>
            <option value="2">java</option>
            <option value="3">测试</option>
        </select>
        <h2>自我介绍</h2>
        <textarea  rows="10" v-model="info"></textarea>
    </div>
    <!-- 
        1.默认情况下, v-model指令绑定的是表单元素的value值  (复选框checkbox除外)
        2.如果遇到复选框checkbox
            非数组 : 一般用于单个复选框,此时绑定的是checked属性
            数组   : 一般用于多个复选框，此时绑定的是value属性
     -->
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
               sex:'女',
               goods:['打游戏'],
               subject:'2',
               info:'还好吧'
            }
        })
    </script>
</body>

v-if指令

(1)作用：根据条件渲染数据

(2)语法：

单分支： v-if="条件语句"

双分支： v-else

多分支: v-else-if="条件语句"

(3)注意点

v-else与v-else-if的前面必须要有 v-if 或者 v-else-if

<body>

    <!-- HTML结构 -->
    <div id="app">

        <input type="text" placeholder="请输入考试分数" v-model.number="score">
        <h2>你的考试分数为：{
  { score }}</h2>
        <hr>
        <h3 v-if="score>=90">爸爸给你买法拉利</h3>
        <h3 v-els

最低0.47元/天解锁文章

dream_of_forget

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础二

v-model.lazy : 在change时触发而非inupt时（失去焦点或enter键的时候才会绑定数据）v-model.number : 输入字符串转为有效的数字 (有效：能转数字就转,不能转就不转)v-model.trim : 去掉字符串首尾空格。
复制链接

扫一扫